Spring Boot Accessibility Sinhala Guide | Accessible Web Apps

ආයුබෝවන් යාළුවනේ! අද අපි කතා කරන්න යන්නේ ගොඩක් වැදගත්, හැබැයි සමහරවිට ටිකක් අඩුවෙන් අවධානය යොමු වෙන මාතෘකාවක් ගැන – ඒ තමයි Web Application Accessibility. සරලව කිව්වොත්, අපේ web apps සහ APIs හැමෝටම, විශේෂයෙන්ම ආබාධ සහිත අයටත් පහසුවෙන් පාවිච්චි කරන්න පුළුවන් විදියට හදන එක. අපි Spring Boot පාවිච්චි කරනවා නම්, මේක කොහොමද හරියට කරන්නේ කියලා අද අපි බලමු.

ගොඩක් වෙලාවට අපි ලස්සනට, වේගවත්ව වැඩ කරන web application එකක් හදනවා, ඒත් හැමෝටම එකම විදියට ඒවා පාවිච්චි කරන්න පුළුවන්ද කියලා හිතන්නේ නැහැ. ඇස් නොපෙනෙන අයට, අත් වෙව්ලන අයට, නැත්නම් වෙනත් සීමාවන් තියෙන අයට අපේ app එක පාවිච්චි කරන්න බැරිනම්, අපි ඒකෙන් ලොකු පිරිසක් අතහරිනවා වගේ නේද? WCAG (Web Content Accessibility Guidelines) කියන්නේ මේ සඳහා තියෙන ජාත්‍යන්තර ප්‍රමිතීන්. මේ guide එකෙන් අපි Spring Boot එක්ක accessible web apps හදන හැටි, ඒ වගේම APIs වලටත් accessibility එකතු කරන්නේ කොහොමද කියලා කතා කරමු.

අද අපි බලන්නේ:

• Accessibility කියන්නේ මොකක්ද සහ ඒක වැදගත් ඇයි?
• Spring Boot ව්‍යාපෘතියකදී accessibility ගැන හිතන්න ඕන කොතනද?
• Semantic HTML සහ ARIA attributes පාවිච්චි කරලා accessibility වැඩි දියුණු කරගන්නේ කොහොමද?
• Accessibility testing tools මොනවද?

ඉතින්, අපි පටන් ගමු!

Accessibility කියන්නේ මොකක්ද සහ ඒක වැදගත් ඇයි?

සරලව කිව්වොත්, Web Accessibility කියන්නේ websites, tools, සහ technologies නිර්මාණය කරලා තියෙන්නේ හැමෝටම, විශේෂයෙන්ම ආබාධ සහිත අයටත්, කිසිම අපහසුතාවයකින් තොරව පාවිච්චි කරන්න පුළුවන් විදියටද කියන එකයි. ලෝක ජනගහනයෙන් සැලකිය යුතු පිරිසකට විවිධ ආබාධ තියෙනවා (දෘෂ්‍ය, ශ්‍රව්‍ය, සංජානන, ස්නායු, භෞතික වගේ). මේ හැමෝටම අන්තර්ජාලය පාවිච්චි කරන්න අයිතියක් තියෙනවා. ඒ වගේම, accessible design කියන්නේ ආබාධ සහිත අයට විතරක් නෙවෙයි, හැමෝටම ප්‍රයෝජනවත් දෙයක් (උදාහරණයක් විදියට, දුර්වල අන්තර්ජාල සම්බන්ධතා තියෙන වෙලාවට, නැත්නම් එළිමහනේ ෆෝන් එක බලනකොට වගේ).

WCAG (Web Content Accessibility Guidelines)

WCAG කියන්නේ web content accessible කරන්න ඕන කොහොමද කියලා කියන ජාත්‍යන්තර ප්‍රමිතීන්. මේවා ප්‍රධාන මූලධර්ම හතරක් මත පදනම් වෙනවා, ඒවට කියන්නේ "POUR" කියලා:

• Perceivable (දැනගන්න පුළුවන්): තොරතුරු සහ UI components භාවිතා කරන්නන්ට තේරෙන විදියට ඉදිරිපත් කරන්න ඕනේ. (උදා: පින්තූරවලට alt text දාන එක).
• Operable (ක්‍රියාත්මක කරන්න පුළුවන්): User interface components සහ navigation ක්‍රියාත්මක කරන්න පුළුවන් වෙන්න ඕනේ. (උදා: keyboard එකෙන් විතරක් web site එකේ හැමතැනම යන්න පුළුවන් වෙන්න ඕනේ).
• Understandable (තේරුම් ගන්න පුළුවන්): තොරතුරු සහ user interface ක්‍රියාත්මක කිරීම තේරුම් ගන්න පුළුවන් වෙන්න ඕනේ. (උදා: පැහැදිලි, සරල භාෂාවක් පාවිච්චි කරන එක).
• Robust (ශක්තිමත්): විවිධ user agents (උදා: web browsers, assistive technologies) හරහා content interpret කරන්න පුළුවන් තරම් ශක්තිමත් වෙන්න ඕනේ.

ඇයි මේක වැදගත් වෙන්නේ?

• නීතිමය අවශ්‍යතා (Legal Requirements): ගොඩක් රටවල් වල accessibility සඳහා නීති තියෙනවා. ඒවා නොසලකා හැරියොත් නඩු දාන්න වුණත් පුළුවන්.
• පුළුල් පරාසයක පාරිභෝගිකයින් (Wider Audience): Accessible app එකක් හදනකොට, ඔබ ගොඩක් දෙනෙක්ට ඔබේ සේවාව ලබා දෙනවා. ඒකෙන් ඔබේ business එකටත් හොඳයි.
• සමාජ වගකීම (Social Responsibility): හැමෝටම අන්තර්ජාලය පාවිච්චි කරන්න පුළුවන් වීම කියන්නේ අපි හැමෝම භුක්ති විඳින අයිතිවාසිකමක්.
• නවෝත්පාදනය (Innovation): Accessibility ගැන හිතනකොට, නිර්මාණශීලී විසඳුම් හොයන්න පුළුවන් වෙනවා.

Spring Boot Project එකකට Accessibility එකතු කරන්නේ කොහොමද?

Spring Boot කියන්නේ backend framework එකක් වුණාට, web applications හදනකොට accessibility ගැන හිතන්න backend එකටත් ලොකු වගකීමක් තියෙනවා. විශේෂයෙන්ම APIs නිර්මාණය කරනකොට සහ frontend එකට දත්ත සපයනකොට. ඒ වගේම, Spring Boot එක්ක Thymeleaf වගේ template engines පාවිච්චි කරනවා නම්, frontend HTML එකත් Spring Boot application එක ඇතුළෙන්ම නිර්මාණය වෙන නිසා, accessibility ගැන මුල ඉඳන්ම හිතන්න පුළුවන්.

Backend Role (API නිර්මාණය)

• Semantic API Responses: API එකකින් දත්ත ලබා දෙනකොට, ඒ දත්ත වලට පැහැදිලි අර්ථයක් (semantic meaning) තියෙන්න ඕනේ. JSON response එකක් නම්, ඒ field names පැහැදිලි වෙන්න ඕනේ. error messages වුණත් පැහැදිලි, මිනිසාට තේරෙන භාෂාවකින් දෙන්න ඕනේ.
• Proper HTTP Status Codes: නිවැරදි HTTP status codes (උදා: 200 OK, 201 Created, 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Internal Server Error) පාවිච්චි කරන එක frontend එකට error handling කරන්න වැදගත්. ඒක accessible error messages දෙන්න උපකාරී වෙනවා.
• Input Validation: backend එකෙන් කරන input validation frontend එකට යවන error messages වල පැහැදිලිව පෙන්වන්න පුළුවන් වෙන්න ඕනේ. උදාහරණයක් විදියට, email format එක වැරදි නම්, "Invalid email format" වගේ පැහැදිලි message එකක්.

Frontend Considerations (Thymeleaf, React, Angular, Vue වගේ ඒවා එක්ක)

අපි Spring Boot එක REST API එකක් විදියට පාවිච්චි කරලා, frontend එකට React, Angular, Vue වගේ framework එකක් පාවිච්චි කරනවා නම්, accessibility වල වැඩිපුරම වගකීම තියෙන්නේ frontend එකට. හැබැයි, Thymeleaf වගේ templating engine එකක් පාවිච්චි කරනවා නම්, HTML එක හදන්නේ Spring Boot ඇතුළෙම නිසා, අපිට backend එකෙන්ම accessible HTML හදන්න පුළුවන්.

ඊළඟ කොටස් වලින් අපි HTML සහ ARIA attributes ගැන තව දුරටත් කතා කරමු.

සංසාරී Spring Boot Web Apps වලට ප්‍රායෝගික උදාහරණ

දැන් අපි බලමු Spring Boot එක්ක web apps හදනකොට accessibility වැඩි දියුණු කරගන්න පුළුවන් ප්‍රායෝගික ක්‍රම කිහිපයක් ගැන.

3.1. Semantic HTML (අර්ථවත් HTML)

HTML tags හරියට පාවිච්චි කරන එක accessibility වලට ගොඩක් වැදගත්. Screen readers වගේ assistive technologies වලට web page එකක තියෙන දේ තේරුම් ගන්න semantic HTML උදව් වෙනවා. <div> tags විතරක් පාවිච්චි කරනවා වෙනුවට, <header>, <nav>, <main>, <article>, <section>, <footer> වගේ semantic tags පාවිච්චි කරන්න.

නරක උදාහරණයක් (Bad Example):

<div id="header">
    <div id="nav">...</div>
</div>
<div id="content">...</div>

හොඳ උදාහරණයක් (Good Example):

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/products">Products</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <h1>අපගේ නිෂ්පාදන</h1>
    <section>
        <h2>කාණ්ඩය 1</h2>
        <article>
            <h3>නිෂ්පාදනය A</h3>
            <p>මේක නිෂ්පාදනය A පිළිබඳ විස්තරයක්.</p>
        </article>
    </section>
</main>
<footer>
    <p>&copy; 2023 My Company</p>
</footer>

3.2. ARIA Attributes (ARIA ගුණාංග)

ARIA (Accessible Rich Internet Applications) attributes කියන්නේ HTML වලට semantic meaning එකතු කරන්න පාවිච්චි කරන attributes. විශේෂයෙන්ම, HTML වලට කෙලින්ම accessibility feature එකක් නැති, JavaScript වලින් dynamic content හදනකොට මේවා ගොඩක් වැදගත් වෙනවා. Screen readers වලට මේ attributes තේරුම් ගන්න පුළුවන්.

• aria-label: element එකකට text label එකක් දෙනවා, ඒක screen reader එකකින් කියවනකොට ඒ label එක කියවනවා.
• aria-describedby: element එකක් ගැන තව විස්තර තියෙන තවත් element එකක් එක්ක link කරනවා.
• role: element එකක purpose එක (උදා: role="button", role="alert").
• aria-live: dynamic content updates ගැන screen reader එකට දැනුම් දෙනවා. (උදා: form submission confirmation).

උදාහරණයක් (Example):

<!-- Search input with an accessible label -->
<label for="search-input" class="visually-hidden">Search</label>
<input type="text" id="search-input" placeholder="Search..." aria-label="වෙබ් අඩවිය පුරා සොයන්න">

<!-- Button with an accessible label -->
<button type="button" aria-label="බාස්කට් එකට එකතු කරන්න">
    <img src="add-to-cart.svg" alt=""> Add to Cart
</button>

<!-- A live region for dynamic messages -->
<div role="status" aria-live="polite" id="status-message"></div>

(visually-hidden කියන්නේ CSS class එකක්, element එක screen එකෙන් සඟවනවා, හැබැයි screen reader එකට access කරන්න පුළුවන් වෙන විදියට.)

3.3. Keyboard Navigation (යතුරුපුවරු සංචලනය)

මූසිකයක් පාවිච්චි කරන්න බැරි අයට keyboard එකෙන් විතරක් web app එකේ හැමතැනම යන්න පුළුවන් වෙන්න ඕනේ. Tab යතුර පාවිච්චි කරලා links, buttons, form fields වගේ interactive elements අතර යන්න පුළුවන් වෙන්න ඕනේ. Shift + Tab වලින් ආපස්සට යන්න පුළුවන් වෙන්න ඕනේ. Focus styles (:focus CSS pseudo-class) පැහැදිලිව පෙනෙන්න සලස්වන්න. Spring Boot Thymeleaf templates වලදී මේක HTML structure එකෙන්ම හරියට හදන්න පුළුවන්.

3.4. Color Contrast & Text Size (වර්ණ වෙනස සහ අකුරු ප්‍රමාණය)

හොඳ color contrast එකක් තියෙන එක low vision තියෙන අයට ගොඩක් වැදගත්. WCAG වලට අනුව අඩුම තරමේ 4.5:1 contrast ratio එකක් තියෙන්න ඕනේ. ඒ වගේම text size එක වැඩි කරන්න පුළුවන් වෙන්න ඕනේ. මේවා CSS වලින් handle කරන දේවල් වුණත්, design phase එකේදීම මේ ගැන හිතන්න ඕනේ.

3.5. Error Handling and Feedback (දෝෂ හැසිරවීම සහ ප්‍රතිපෝෂණ)

Forms වල errors තියෙනකොට, ඒ errors පැහැදිලිව, accessible විදියට පෙන්වන්න ඕනේ. Error messages අදාළ form field එකට ළඟින්ම තියෙන්න ඕනේ. Spring Boot validation errors Thymeleaf එක්ක render කරනකොට, මේ ගැන අවධානය යොමු කරන්න.

<div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username" th:field="*{username}"
           aria-describedby="username-error" aria-invalid="true">
    <span id="username-error" class="error-message"
          th:if="${#fields.hasErrors('username')}"
          th:errors="*{username}">Invalid username</span>
</div>

මෙහිදී aria-describedby සහ aria-invalid="true" වැනි attributes පාවිච්චි කරලා screen reader එකකට error එක ගැන දැනුම් දෙනවා. th:errors කියන්නේ Thymeleaf වලින් Spring Boot validation errors පෙන්නන්න පාවිච්චි කරන එකක්.

Accessibility පරීක්ෂණ මෙවලම් (Accessibility Auditing Tools)

අපි කොච්චර හොඳට code ලිව්වත්, accessibility තියෙනවද කියලා පරීක්ෂා කරන එක අත්‍යවශ්‍යයි. මේ සඳහා පාවිච්චි කරන්න පුළුවන් tools කිහිපයක් මෙන්න:

• Lighthouse (Chrome DevTools): මේක Chrome browser එකේම තියෙන tool එකක්. Performance, SEO වගේම Accessibility score එකකුත් දෙනවා. ඒ වගේම improve කරන්න පුළුවන් තැන් පෙන්නනවා.
• axe DevTools (Browser Extension): මේක browser extension එකක් විදියට එනවා. Lighthouse වගේම accessibility issues හොයලා පෙන්නනවා. ගොඩක් ප්‍රසිද්ධ සහ විශ්වාසදායක tool එකක්.
• Manual Testing with Screen Readers: screen reader එකක් (NVDA Windows වලට, VoiceOver macOS වලට, TalkBack Android වලට) පාවිච්චි කරලා ඔබේ web app එක test කරන එක අත්‍යවශ්‍යයි. Automated tools වලින් හැමදේම හොයන්න බැහැ.
• Color Contrast Checkers: WebAim Contrast Checker වගේ tools පාවිච්චි කරලා ඔබේ text සහ background color වල contrast ratio එක WCAG standards වලට අනුකූලද කියලා බලන්න පුළුවන්.

නිගමනය

ඉතින් යාළුවනේ, අපි අද Spring Boot එක්ක accessible web applications හදන එකේ වැදගත්කම සහ ඒ සඳහා පාවිච්චි කරන්න පුළුවන් ක්‍රම කිහිපයක් ගැන කතා කළා. Accessibility කියන්නේ සරල feature එකක් නෙවෙයි, ඒක design process එකේම මුල් අදියරේ ඉඳන් හිතන්න ඕන දෙයක්. Semantic HTML, ARIA attributes හරියට පාවිච්චි කරන එක, keyboard navigation ගැන සැලකිලිමත් වෙන එක සහ error messages පැහැදිලිව දෙන එක වගේ දේවල් ඔබේ app එක හැමෝටම පාවිච්චි කරන්න පුළුවන් වෙන්න ගොඩක් උදව් වෙනවා.

මතක තියාගන්න, හොඳ developer කෙනෙක් කියන්නේ හැමෝටම වැඩ කරන software හදන කෙනෙක්. Accessibility කියන්නේ "nice to have" එකක් නෙවෙයි, ඒක අනිවාර්යයෙන්ම "must have" එකක්. ඔබේ ඊළඟ Spring Boot project එකේදී මේ ගැන හිතලා වැඩ කරන්න. ඔබේ අත්දැකීම්, ප්‍රශ්න, නැත්නම් තව tips තියෙනවා නම් comment section එකේ ලියන්න. අපි හැමෝටම තව ඉගෙන ගන්න පුළුවන්!

ඔබට සුභ දවසක්!