recentpopularlog in

piperh : aria   30

Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
overview of methods to ensure accessibility of buttons (best put text in them, but if it's only an icon ...)
webdesign  web  design  button  accessible  accessibility  aria  icon 
10 weeks ago by piperh
See No Evil: Hidden Content and Accessibility - Cloud Four
article about hiding content in different contexts, with accessibility and screen readers in mind
webdesign  web  design  hidden  content  aria  accessibility  accessible  attribute  hiding 
march 2019 by piperh
How do you figure? |
feb 2019: about the accessible use of html figure and figcaption
webdesign  web  design  css  figure  figcaption  caption  aria  accessibility  accessible  html 
february 2019 by piperh
Designing Layouts for Screen Readers
title: Designing Layouts for Screen Readers. About the experience of using a site with a screen reader
webdesign  web  design  accessibility  accessible  screen  reader  layout  aria 
february 2019 by piperh
How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
about the possible markup options for an accordion, with and without semantic elements, for best accessibility. Doesn't give script for the accordion itself, just says it would be js. Some useful resources at end
webdesign  web  design  accordion  markup  html  semantic  element  faq  resources  aria  accessibility  accessible 
september 2018 by piperh
Accessible Breadcrumb Navigation
Examples of a breadcrumb navigation using aria-label to provide an accessible name, and aria-current to indicate the currently active link.
webdesign  web  design  accessibility  accessible  breadcrumb  trail  focus  active  css  aria 
september 2018 by piperh
Know your ARIA: 'Hidden' vs 'None' |
author says: A primer on appropriately using aria-hidden='true' and role='none/presentation'. They each do very different things to elements, but their purposes are sometimes confused by developers.
webdesign  web  design  accessibility  aria  css  hidden  html 
june 2018 by piperh
Inclusive Components
blog about inclusive design (accessibility) of webpage components
webdesign  web  design  accessible  accessibility  inclusive  components  aria  a11y  css  code  coding 
november 2017 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
A11Y Style Guide
A11Y Style Guide. They say: This application is a living style guide, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise. Meaty, thorough, no-stupid-effects-or-icons site devoted to accessibility.
webdesign  web  design  accessibility  accessible  reference  howto  guide  tips  aria  a11y 
may 2017 by piperh
Using ARIA
This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities.
webdesign  web  design  aria  accessibility  accessible  code  coding  role 
april 2017 by piperh
CSS sidebar toggle
css only sidebar toggle with a bit of js for accessibility, aria states and tab index. Very smooth. I think it uses transformX but need to study it more. See orig article for breakdown. view in compiled mode. Code is absurdly complicated by convoluted font-size vh guff but the sidebar transition is good
webdesign  web  design  css  menu  sidebar  toggle  css-only  aria  accessible  code 
april 2017 by piperh
jQuery simple and accessible modal window, using ARIA - By Nicolas Hoffmann
I made this work with medicar form on job descrip page, but with a few shortcomings and it didn't retain the Success message in the modal window, but closed the window instead
webdesign  web  design  modal  window  accessible  aria  jquery 
january 2017 by piperh
Introducing A11y Toggle
great code snippet for vanilla js toggle script
webdesign  web  design  js  javascript  vanilla  toggle  aria  script  details  summary  style  css 
march 2016 by piperh
How to Use ARIA Effectively with HTML5
readable and easily understandable piece about adding aria attributes and semantic tags to html. Easy to execute stuff and worthwhile
webdesign  web  design  aria  accessibility  html  accessible  webdev  roles  attribute  semantic  tag  role  presentation 
march 2016 by piperh

Copy this bookmark:

to read