menu
techminis

A naukri.com initiative

New

google-web-stories
Home

>

Programming News

>

Build Acce...
source image

Dev

1d

read

0

img
dot

Image Credit: Dev

Build Accessibility Semantics into Widgets - Web Accessibility Initiative

  • The W3C Accessibility Working Group started the Web Accessibility Initiative to assist developers with building accessibility semantics into web patterns and widgets.
  • Design Systems like Material Design, Fluent UI, and Human Interface UI, are Widget-Based Design Systems that are built with Web Components and closely follow the Web Accessibility Guidelines when translated to Native platforms.
  • Using these semantics will not only improve the accessibility of your websites but also your development speed.
  • The Web Accessibility initiative has sample widgets and patterns that can be viewed with CodePen.
  • They offer an Image Carousel Widget on CodePen that can be downloaded and implemented with Web Accessibility's pre-built accessibility semantics.
  • The carousel can be disabled for auto-rotation and if false, the pause/play button can be hidden.
  • The role of the carousel can be set to 'carousel', the aria-label can be set as 'Highlighted television shows' and the 'aria-roledescription' can be set to 'slide'.
  • Accessiblity properties can be added for the pause, previous, and next buttons.
  • CSS guidelines can be followed for more accessible styling.
  • Developers can build without a framework using web components and build with an emphasis on accessibility.

Read Full Article

like

Like

share

Share

For uninterrupted reading, download the app