धारा 508 अनुपालन वास्तव में बेहतर इंजीनियरिंग क्यों है
अधिकांश टीमें धारा 508 को अंतिम समय में कानूनी बाधा की तरह मानती हैं, लेकिन सुलभता के लिए निर्माण आपको सभी के लिए क्लीनर कोड और बेहतर UX लिखने के लिए मजबूर करता है।
मैंने DOM पेड़ों को देखने में बहुत समय बिताया है, जो ऐसा लगता है कि किसी ने मुट्ठी भर
लेकिन हम इसे अलग तरह से देखते हैं।
यदि आपकी साइट 508 के अनुरूप नहीं है, तो यह मूल रूप से टूटी हुई है। आप ऐसी साइट नहीं भेजेंगे जहाँ 'सबमिट' बटन Chrome उपयोगकर्ताओं के लिए काम नहीं करता हो, है ना? तो ऐसी साइट शिप करना ठीक क्यों है जो कीबोर्ड या ब्रेल डिस्प्ले का उपयोग करने वाले किसी व्यक्ति के लिए काम नहीं करती है? सेक्शन 508 उन सुविधाओं की कोई अतिरिक्त लेयर नहीं है, जिनका होना अच्छा है। यह फ़ंक्शनल सॉफ़्टवेयर के लिए आधार रेखा है। Sweent LLC में, हमने बहुत सारे एंटरप्राइज़-ग्रेड सिस्टम बनाए हैं - कैसर परमानेंट के लिए मेडिकल डिवाइस पैचिंग टूल से लेकर डेलॉइट के लिए मार्केटिंग साइट्स तक - और सबक हमेशा एक जैसा होता है: सुलभ कोड बेहतर कोड होता है।
हम असल में किस बारे में बात कर रहे हैं?
धारा 508 1973 के पुनर्वास अधिनियम का हिस्सा है। इसमें कहा गया है कि संघीय एजेंसियों को अपनी इलेक्ट्रॉनिक और सूचना प्रौद्योगिकी को विकलांग लोगों के लिए सुलभ बनाना होगा। वेब की दुनिया में, इसका मतलब आमतौर पर वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) का पालन करना होता है।
हमारी जैसी फर्म के लिए, यह हमारी रोटी और मक्खन है। हम एक सेवा-अक्षम वयोवृद्ध स्वामित्व वाला लघु व्यवसाय (SDVOSB) हैं और हमारे पास GSA MAS अनुबंध (47QRAA25D0024) है। जब हम सरकार के लिए निर्माण करते हैं, तो 508 अनुपालन कोई सुझाव नहीं होता है। यह क़ानून है। लेकिन भले ही आप संघीय अनुबंधों का पीछा नहीं कर रहे हों, लेकिन 508 के पीछे के सिद्धांत आपके सॉफ़्टवेयर को सभी के लिए बेहतर बनाते हैं।
इसके बारे में सोचें। क्या आपने कभी तेज धूप में अपने फोन का इस्तेमाल करने की कोशिश की है और कम कंट्रास्ट वाला टेक्स्ट नहीं देख पाए हैं? यह एक्सेसिबिलिटी की समस्या है। क्या आपको कभी कोई अस्थायी चोट लगी थी और किसी साइट को एक हाथ से नेविगेट करना पड़ा था? सुलभता की समस्या। बेहतर कंट्रास्ट और कीबोर्ड शॉर्टकट हर किसी की मदद करते हैं, न कि केवल स्थायी विकलांग लोगों की। यह फुटपाथ पर कर्ब कट का डिजिटल संस्करण है। इसे व्हीलचेयर के लिए डिज़ाइन किया गया था, लेकिन यह टहलने वालों, स्केटबोर्ड और भारी सामान रखने वाले लोगों के लिए भी जीवन को आसान बनाता है।
सिमेंटिक एचटीएमएल हिल आई विल डाई ऑन
अपने भविष्य के लिए आप जो सबसे बड़ा एहसान कर सकते हैं, वह है सिमेंटिक एचटीएमएल का उपयोग करना। बिना कोशिश किए अनुपालन का 70% तरीका पाने का यह सबसे आसान तरीका है। हम इसे हर समय देखते हैं: एक डेवलपर चाहता है कि एक बटन एक खास तरीके से दिखे, इसलिए वे
``एचटीएमएल
```माउस के साथ देखे गए उपयोगकर्ता के लिए, यह एक बटन की तरह दिखता है। लेकिन स्क्रीन रीडर को एक जेनेरिक कंटेनर दिखाई देता है। यह नहीं जानता कि यह इंटरैक्टिव है। यह बटनों की सूची में दिखाई नहीं देगा। आपको tabindex= "0", role=" button "को मैन्युअल रूप से जोड़ना होगा, और 'एंटर' और 'स्पेस' कुंजी ईवेंट को हैंडल करना होगा, ताकि यह एक बटन की तरह काम कर सके।
या, आप सिर्फ़ <button> टैग का उपयोग कर सकते हैं।
``एचटीएमएल
सबमिट करें
ब्राउज़र पहले से ही जानता है कि बटन को कैसे हैंडल करना है। यह डिफ़ॉल्ट रूप से कीबोर्ड-एक्सेसिबल है। इसमें सही भूमिकाएँ अंतर्निहित हैं। मेरा यही मतलब है जब मैं कहता हूं कि 508 अनुपालन सिर्फ अच्छी इंजीनियरिंग है। आप टूल का उपयोग उसी तरह कर रहे हैं जिस तरह से उन्हें इस्तेमाल करने के लिए डिज़ाइन किया गया था। जब हम डेलॉइट की एंटरप्राइज़ मार्केटिंग टीम का समर्थन कर रहे थे, तो हाई-फ़िडेलिटी फ़िग्मा डिज़ाइनों को कोड में अनुवाद करने का मतलब यह सुनिश्चित करना था कि हर 'बटन' वास्तव में एक बटन था, न कि एक स्टाइल स्पैन जो ऑडिट को विफल कर देगा।
और यह सिर्फ़ बटनों से भी ज़्यादा गहरा होता है। <nav>अपने मेनू के लिए ``, अपनी <main>प्राथमिक सामग्री के लिए`` और <header>अपनी ब्रांडिंग के लिए ``का उपयोग करने से ब्राउज़र को एक नक्शा मिलता है। जब आप इनका सही तरीके से उपयोग करते हैं, तो आप केवल स्क्रीन रीडर की मदद नहीं करते हैं; आप अन्य डेवलपर्स के लिए अपने कोड को पढ़ने में आसान बनाते हैं। मैं एक अच्छी तरह से संरचित HTML फ़ाइल देख सकता हूं और यह जान सकता हूं कि ब्राउज़र खोले बिना वास्तव में क्या हो रहा है। इससे रखरखाव के दौरान समय और धन की बचत होती है।
## माउस-फ़्री टेस्ट
यह एक त्वरित प्रयोग है। अपने मौजूदा प्रोजेक्ट पर जाएं, अपने माउस को फर्श पर रखें, और केवल अपने 'टैब' और 'एंटर' कुंजियों का उपयोग करके कोर यूज़र फ़्लो को पूरा करने का प्रयास करें।
क्या आप देख सकते हैं कि फ़ोकस कहाँ है? यदि आपने फ़ोकस रिंग को इसलिए छिपा दिया है क्योंकि आपके डिज़ाइनर को लगा कि यह 'बदसूरत' लग रहा है, तो आप पहले ही असफल हो चुके हैं। अगर फ़ोकस हेडर से फ़ुटर पर जाता है और फिर वापस साइडबार पर जाता है, तो आपका DOM ऑर्डर गड़बड़ा जाता है।
कैसर परमानेंट के लिए एक प्रोजेक्ट पर काम करते समय हमें इसका सामना करना पड़ा। हम IBM BigFix का उपयोग करके हजारों डिवाइसों के लिए मेडिकल डिवाइस पैचिंग को प्रबंधित करने के लिए एक टूल बना रहे थे। स्वास्थ्य देखभाल के माहौल में, आपके पास ऐसा UI नहीं हो सकता जो भ्रमित करने वाला हो या नेविगेट करने में मुश्किल हो। यदि कोई तकनीशियन जल्दी में है और 'पुष्टि करें' बटन नहीं ढूंढ पा रहा है, क्योंकि फ़ोकस स्थिति अदृश्य है, तो यह एक वास्तविक समस्या है। हमने यह सुनिश्चित करने में बहुत समय बिताया कि हर एक क्रिया को कीबोर्ड के माध्यम से ट्रिगर किया जा सकता है, जिसमें स्पष्ट, उच्च-कंट्रास्ट फ़ोकस संकेतक हैं। यह सिर्फ़ अनुपालन के बारे में नहीं था; यह सुरक्षा के बारे में था।
लेकिन आधुनिक रिएक्ट ऐप्स में फ़ोकस प्रबंधन मुश्किल हो जाता है। जब आप सिंगल पेज एप्लिकेशन (SPA) में 'पेज' बदलते हैं, तो ब्राउज़र वास्तव में फिर से लोड नहीं होता है। स्क्रीन रीडर यूज़र के लिए, कुछ नहीं हुआ। वे अभी भी उस लिंक पर बैठे हैं जिसे उन्होंने अभी क्लिक किया था, लेकिन उनके आस-पास की सामग्री बदल गई है। पेज में बदलाव की घोषणा करने के लिए आपको मैन्युअल रूप से फ़ोकस को नई सामग्री पर ले जाना होगा या `aria-live` क्षेत्र का उपयोग करना होगा। यदि आप ऐसा नहीं करते हैं, तो आपका 'आधुनिक' ऐप एक नेत्रहीन उपयोगकर्ता के लिए एक ईंट है।
## ARIA कोई जादू की छड़ी नहीं है
एक्सेसिबल रिच इंटरनेट एप्लिकेशन (ARIA) विशेषताएँ शक्तिशाली हैं, लेकिन उनका अक्सर दुरुपयोग किया जाता है। ARIA का पहला नियम यह है: यदि आप इसके बजाय मूल HTML तत्व का उपयोग कर सकते हैं, तो ऐसा करें।
मैंने देखा है कि डेवलपर्स हर चीज पर `एरिया-लेबल` और `एरिया-लाइव` छिड़कते हैं, जैसे वे स्टेक को सीज़ कर रहे हों। यह स्क्रीन रीडर यूज़र के लिए शोरगुल वाला, भ्रमित करने वाला अनुभव पैदा करता है। ARIA का उपयोग उन अंतरालों को भरने के लिए किया जाना चाहिए जिन्हें मूल HTML हैंडल नहीं कर सकता, जैसे जटिल टैब पैनल या डैशबोर्ड में रीयल-टाइम स्थिति अपडेट।
यदि आप कस्टम डेटा विज़ुअलाइज़ेशन बना रहे हैं—ऐसा कुछ जो हमने सोशल मीडिया एनालिटिक्स सूट के लिए बहुत किया है—तो चार्ट में क्या हो रहा है, यह समझाने के लिए आपको ARIA की आवश्यकता हो सकती है। लेकिन मानक फ़ॉर्म के लिए? इसे सरल रखें। लेबल और इनपुट आपके मित्र हैं।
और सभी पवित्र चीज़ों से प्यार करने के लिए, कृपया <label>``टैग का सही उपयोग करें। किसी इनपुट के बगल में सिर्फ़ टेक्स्ट न डालें। उन्हें लिंक करने के लिए `for` विशेषता का उपयोग करें। यह उपयोगकर्ता को एक बड़ा क्लिक लक्ष्य देता है और स्क्रीन रीडर को बताता है कि वह इनपुट किस लिए है। यह एक छोटा सा विवरण है जो आपकी साइट को पेशेवर महसूस करने में बहुत बड़ा बदलाव लाता है।
## “बदसूरत” सुलभ साइट का मिथक
यह अजीब विचार है कि एक सुलभ साइट को 1994 से एक सादे पाठ दस्तावेज़ की तरह दिखना चाहिए। यह बिल्कुल सही नहीं है। आपके पास एक सुंदर UI हो सकता है जो पूरी तरह से अनुपालन करने योग्य भी हो। इसके लिए बस कुछ इरादतन की जरूरत होती है।
इसका मतलब है ऐसे कलर पैलेट चुनना जो सामान्य टेक्स्ट के लिए 4. 5:1 कंट्रास्ट अनुपात को पूरा करते हों। इसका मतलब है कि जानकारी देने के लिए एकमात्र तरीके के रूप में रंग का उपयोग नहीं करना। यदि कोई त्रुटि संदेश किसी बॉक्स के चारों ओर सिर्फ एक लाल बॉर्डर है, तो कलरब्लाइंड यूज़र इसे मिस कर सकता है। इसे स्पष्ट करने के लिए 'Error: 'जैसे आइकॉन या टेक्स्ट लेबल जोड़ें।
रीटा गोंज़ालेज़ के नेतृत्व वाली हमारी डिज़ाइन टीम पहले दिन से ही इस पर ध्यान केंद्रित करती है। जब हम Figma में होते हैं, तो कोड की एक पंक्ति लिखे जाने से पहले हम कंट्रास्ट और फ़ॉन्ट आकार की जाँच कर रहे होते हैं। लॉन्च से तीन सप्ताह पहले रिएक्ट कंपोनेंट को रिफैक्टर करने की तुलना में मॉकअप में डिज़ाइन की खामी को ठीक करना बहुत सस्ता है। हमने साउथ कैरोलिना विश्वविद्यालय और NMSU के साथ अपने काम में इसका लाभ देखा है—स्वच्छ, सुलभ डिज़ाइन वास्तव में अधिक पेशेवर और भरोसेमंद लगते हैं। अच्छा डिज़ाइन समावेशी डिज़ाइन है।
## टूल जिनका हम असल में उपयोग करते हैं
स्वचालित परीक्षण बढ़िया है, लेकिन यह केवल एक शुरुआत है। आसानी से मिलने वाले फ़ायदों को पकड़ने के लिए WAVE, Axe, और Lighthouse जैसे टूल शानदार हैं—जिसमें ऑल्ट टेक्स्ट, खराब कंट्रास्ट या डुप्लीकेट आईडी मौजूद नहीं हैं। हम GitHub Actions का उपयोग करके इन्हें अपनी CI/CD पाइपलाइनों में एकीकृत करते हैं, ताकि हम रिग्रेशन को जल्दी पकड़ सकें। हम अपने यूनिट परीक्षणों के दौरान एक्सेसिबिलिटी चेक चलाने के लिए `jest-axe` का भी उपयोग करते हैं।
लेकिन स्वचालित टूल केवल 30% से 40% तक एक्सेसिबिलिटी समस्याओं को पकड़ते हैं। वे आपको बता सकते हैं कि किसी इमेज में ऑल्ट टेक्स्ट है या नहीं, लेकिन वे आपको यह नहीं बता सकते कि क्या वह टेक्स्ट वास्तव में मददगार है।
``एचटीएमएल
<!-- Bad: Not helpful -->
<img src="chart.png" alt="image">
<!-- Good: Descriptive -->
<img src="chart.png" alt="Bar chart showing a 20% increase in social media engagement over Q3.">
``
यही कारण है कि मैन्युअल परीक्षण गैर-परक्राम्य है। हम Windows पर NVDA और Mac पर VoiceOver जैसे स्क्रीन रीडर का उपयोग करते हैं। हम 'नो-माउस' टेस्टिंग और जूम टेस्टिंग भी करते हैं। क्या आपने कभी 400% ज़ूम पर अपनी साइट का उपयोग करने की कोशिश की है? WCAG 2.1 के लिए आवश्यक है कि आपकी साइट उस स्तर पर क्षैतिज स्क्रॉलिंग के बिना कार्यात्मक रहे। यह आपको बेहतर रेस्पॉन्सिव CSS लिखने के लिए मजबूर करता है। यह केवल कम दृष्टि वाले लोगों के लिए ही नहीं है; यह छोटे डिवाइस या अजीब ब्राउज़र विंडो आकार का उपयोग करने वाले किसी भी व्यक्ति के लिए है। अगर आपकी साइट 400% ज़ूम पर टूटती है, तो आपका लेआउट लॉजिक शायद वैसे भी बहुत कमजोर है।
## द बिज़नेस केस (बियॉन्ड द लॉ)
अगर नैतिक और कानूनी तर्क आपको प्रभावित नहीं करते हैं, तो चलिए पैसे की बात करते हैं। जब आप एक सुलभ साइट बनाते हैं, तो आप अपने बाज़ार का विस्तार कर रहे होते हैं। अकेले अमेरिका में, लाखों लोग किसी न किसी रूप में विकलांगता से पीड़ित हैं। यदि आपकी साइट उनके लिए अनुपयोगी है, तो आप सचमुच ग्राहकों को दूर कर रहे हैं। आप अपने संभावित दर्शकों को क्यों कम करना चाहेंगे?
सर्च इंजन को ऐक्सेस की जा सकने वाली साइटें भी पसंद हैं। Google के क्रॉलर स्क्रीन रीडर की तरह काम करते हैं। वे यह समझने के लिए कि आपका पेज किस बारे में है, हेडर, ऑल्ट टेक्स्ट और सिमेंटिक स्ट्रक्चर की तलाश करते हैं। यदि आपने 508 अनुपालन के लिए ऑप्टिमाइज़ किया है, तो आपने अनिवार्य रूप से बड़ी मात्रा में SEO कार्य मुफ्त में किया है। आपको बेहतर रैंकिंग मिलती है क्योंकि आपने एक बेहतर साइट बनाई है।
और फिर रखरखाव का पहलू है। सिमेंटिक, अच्छी तरह से संरचित कोड को पढ़ना आसान है और डीबग करना आसान है। जब एक नया डेवलपर टीम में शामिल होता है और एक ``, एक <nav>`, <main>और एक`` देखता है, तो <footer>वे तुरंत लेआउट को समझते हैं। यदि उन्हें `div-1`, `div-2`, और `div-3` दिखाई देते हैं, तो उन्हें यह पता लगाने में एक घंटा लगाना होगा कि नेविगेशन कहाँ समाप्त होता है और सामग्री शुरू होती है। एक्सेसिबिलिटी दस्तावेज़ीकरण का एक रूप है जो कभी पुराना नहीं होता है।
## व्हाई वी केयर एट स्वीन्ट
हम इस सामान के साथ खाइयों में रहे हैं। चाहे वह डेलॉइट के लिए Adobe Analytics को एकीकृत करना हो या NMSU के लिए जटिल डैशबोर्ड बनाना हो, हमने देखा है कि एक्सेसिबिलिटी नीचे की रेखा को कैसे प्रभावित करती है।
NMSU IT अनुप्रयोग आधुनिकीकरण प्रोजेक्ट पर, हम पुराने रेल ऐप्स को आधुनिक React और Node.js स्टैक में माइग्रेट कर रहे हैं। हमारा एक बड़ा लक्ष्य सुरक्षा और अनुपालन सुधार है। पुराने ऐप्स एक ऐसे युग में बनाए गए थे, जहां एक्सेसिबिलिटी एक बाद का विचार था। शुरुआत से ही नए रिएक्ट घटकों में 508 मानकों को शामिल करके, हम यह सुनिश्चित कर रहे हैं कि विश्वविद्यालय को अब से पांच साल बाद इन्हीं सिरदर्द से जूझना न पड़े। हम एक अधिक समावेशी भविष्य का निर्माण करके अतीत के तकनीकी ऋण को ठीक कर रहे हैं।
यह शिल्प कौशल में गर्व के बारे में है। एक अनुभवी व्यवसाय के रूप में, हमें अपनी बात मनवाना पसंद नहीं है। हम ऐसी चीज़ें नहीं बनाना चाहते जो सिर्फ़ कुछ लोगों के लिए कारगर हों। हम ऐसी चीज़ें बनाना चाहते हैं जो सभी के लिए कारगर हों। जूलियन तेजेरा, हमारे संस्थापक, ने मरीन कॉर्प्स में समय बिताया, जहां मिशन की सफलता हर विवरण के सही होने पर निर्भर करती है। हम अपने कोड में वही अनुशासन लाते हैं।
## कैसे शुरू करें
यदि आप एक विशाल विरासत स्थल को देख रहे हैं और अभिभूत महसूस कर रहे हैं, तो एक ही बार में सब कुछ ठीक करने का प्रयास न करें। अपने वैश्विक तत्वों—शीर्षलेख, फ़ुटर और मुख्य नेविगेशन से प्रारंभ करें। अगर वे ऐक्सेस नहीं किए जा सकते हैं, तो बाकी साइट से कोई फर्क नहीं पड़ता क्योंकि यूज़र मुख्य दरवाज़े से बाहर नहीं निकल सकते।
इसके बाद, अपने फ़ॉर्म देखें। क्या कोई साइन अप कर सकता है? क्या वे कुछ खरीद सकते हैं? क्या वे आपसे संपर्क कर सकते हैं? पहले उच्च मूल्य वाले पथ ठीक करें।
क्या यह मुश्किल है? कभी-कभार। क्या हर जटिल UI घटक के लिए कोई सही उत्तर है? हमेशा नहीं। लेकिन यह प्रयास इसके लायक है। पिछली बार आपने वास्तव में स्क्रीन रीडर के साथ अपनी साइट को नेविगेट करने का प्रयास कब किया था? यदि आपने हाल ही में ऐसा नहीं किया है, तो इसे आज ही आज़माएँ। यह आंखें खोल देने वाला अनुभव है, और यह संभवत: आपके कोड लिखने के तरीके को हमेशा के लिए बदल देगा। आपको लग सकता है कि जिन 'बग' का आप पीछा कर रहे हैं, वे असल में सिर्फ एक टूटी हुई नींव के लक्षण थे।
अक्सर पूछे जाने वाले प्रश्न
धारा 508 1973 के पुनर्वास अधिनियम का हिस्सा है, जिसमें संघीय इलेक्ट्रॉनिक और आईटी को विकलांग लोगों के लिए सुलभ होने की आवश्यकता है, जो व्यवहार में WCAG दिशानिर्देशों के माध्यम से लागू किया गया है। कानून से परे, एक्सेसिबिलिटी स्वच्छ सिमेंटिक HTML, मजबूत कीबोर्ड समर्थन, बेहतर कंट्रास्ट, और अधिक लचीले रेस्पॉन्सिव लेआउट को लागू करती है - वही गुण जो सॉफ़्टवेयर को बनाए रखने में आसान बनाते हैं, नए डेवलपर्स को तेजी से ऑनबोर्ड करते हैं, और खोज इंजन के लिए मित्रवत बनाते हैं। यह बेसलाइन इंजीनियरिंग क्वालिटी के लिए एक प्रॉक्सी है।
हमेशा पहले मूल तत्व तक पहुंचें। A कीबोर्ड एक्टिवेशन, फ़ोकस, और सहायक तकनीक के सिमेंटिक्स को बॉक्स से हटकर ठीक करता है।
Axe, WAVE, Lighthouse, और jest-axe जैसे स्वचालित टूल 30-40% समस्याओं (ऑल्ट टेक्स्ट, कंट्रास्ट, डुप्लिकेट आईडी) को पकड़ते हैं - उन्हें CI में चलाएं। बाकी के लिए, Windows पर NVDA या macOS पर VoiceOver का उपयोग करें, केवल कीबोर्ड से नेविगेट करें, और 400% ब्राउज़र ज़ूम की जाँच करें। विशेष रूप से SPA मार्ग परिवर्तनों के लिए, मैन्युअल रूप से फ़ोकस को नए पेज के शीर्षक पर ले जाएं या परिवर्तन की घोषणा करने के लिए एरिया-लाइव क्षेत्र का उपयोग करें - अन्यथा स्क्रीन-रीडर यूज़र के पास कोई संकेत नहीं है कि कुछ भी हुआ है।
वैश्विक तत्व पहले: हेडर, फुटर, और प्राथमिक नेविगेशन। अगर कोई यूज़र मुख्य दरवाज़े से बाहर नहीं निकल पाता है, तो पेज पर और कुछ भी मायने नहीं रखता। इसके बाद, उच्च मूल्य वाले फ़ॉर्म — साइनअप, चेकआउट, संपर्क — को ठीक करें क्योंकि वे पथ हैं जो सीधे रूपांतरित होते हैं। सिमेंटिक एचटीएमएल, हर इनपुट पर सही, एक दृश्यमान फ़ोकस रिंग, और 4. 5:1 कंट्रास्ट अनुपात सुई को किसी भी एरिया-स्प्रिंकलिंग अभ्यास की तुलना में आगे ले जाएगा।
नहीं। एक ऐक्सेसिबल डिज़ाइन केवल तीन चीज़ों को सीमित करता है: कंट्रास्ट अनुपात, स्थिति बताने के लिए अकेले रंग का उपयोग नहीं करना, और कीबोर्ड और ज़ूम का समर्थन करना। अच्छी तरह से बनाई गई UI लाइब्रेरी और जानबूझकर डिज़ाइन प्रणालियां — कोड लिखे जाने से पहले कंट्रास्ट और फ़ॉन्ट आकार की जांच के साथ Figma में शुरू होती हैं — पॉलिश किए गए, आधुनिक इंटरफेस तैयार करती हैं जो ऑडिट भी पास करते हैं। मॉकअप में इन फ़ैसलों को ठीक करना, लॉन्च से पहले रिएक्ट घटकों को फिर से तैयार करने की तुलना में नाटकीय रूप से सस्ता है।