recentpopularlog in

piperh : accessible   103

« earlier  
Digging Into The Display Property: Box Generation — Smashing Magazine
about use of display:contents; and when you might want to use it and when you shouldn't. By Rachel Andrew
webdesign  web  design  css  display  contents  property  box  layout  accessibility  accessible 
13 days ago by piperh
Under-Engineered Toggles | Adrian Roselli
css-only toggles using the checkbox default browser functionality
webdesign  web  design  toggle  css-only  css  accessible  accessibility  checkbox  default 
18 days ago by piperh
Designing button focus states for better usability - DEV Community 👩‍💻👨‍💻
short, not very interesting piece about focus state, but has useful list of resources at end
webdesign  web  design  button  focus  state  accessibility  accessible  css 
24 days ago by piperh
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective – A List Apart
by a person who suffered severe vertigo and the effect on their navigation ability - and consequent advice on web design
webdesign  web  design  accessibility  accessible  vestibular  disorder 
29 days ago by piperh
Hacking Custom Checkboxes And Radios – Hacker Noon
about styling custom checkboxes and radio buttons, while maintaining accessibility
webdesign  web  design  checkbox  toggle  switch  radio  button  css  default  customise  style  accessible 
7 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 
8 weeks ago by piperh
When Is A Button Not A Button? — Smashing Magazine
nice reminder of how to use html's own semantics - good for accessibility and keyboard tabbing. Brush up on <button type="button"> ("submit" is default value for a button, he says). He suggests using "disabled" attribute for button or fieldset but I don't see how one would trigger it. 'disabled' attribute also removes element from tab order
webdesign  web  design  button  html  semantic  attribute  vale  accessibility  accessible  element 
9 weeks ago by piperh
Semantics to Screen Readers · An A List Apart Article
in-depth account of browser/screen reader interaction with sites, from accessibility point of view
webdesign  web  design  accessible  accessibility  screen  reader  browser 
10 weeks ago by piperh
How A Screen Reader User Accesses The Web: A Smashing Video — Smashing Magazine
a Smashing Mag webinar video with Léonie Watson - a blind screen reader user. About usable and technical accessibility
webdesign  web  design  accessibility  accessible  blind  user  css  code  coding  video 
10 weeks ago by piperh
Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need · An A List Apart Article
Leave interface features at browser default. Obvious when you think about it but good to be reminded - don't be tempted by designer vanity, think always of the user
webdesign  web  design  interface  accessibility  accessible  user  ui  ux 
11 weeks ago by piperh
How do you figure? | scottohara.me
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
A11Y Style Guide
they say: This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
webdesign  web  design  a11y  accessibility  accessible  style  guide  html  css  code  coding 
november 2018 by piperh
Simple recommendations for writing text descriptions that make a big difference | Invotra
about writing alt text for best accessibility and best experience for disabled users
webdesign  web  design  accessibility  accessible  alt  text  image 
november 2018 by piperh
Unbuttoning Buttons | scottohara.me
explains how to make a block of text behave like a button, by using css, aria and js to restyle the button element. Complicated and possibly not worth worrying about
webdesign  web  design  button  css  inline  selector  accessible  reset  style  styling 
october 2018 by piperh
CheckboxRadio
Styled checkbox and radio buttons from Filament but dependent on jQuery or Showstring (another js lib). Very nicely done but look like a fair amount of faff ( too much faff in fact for Amantaní ). The css file is long
webdesign  web  design  accessible  checkbox  radio  button  custom  filament  styled  css  js  javascript  script 
october 2018 by piperh
Pure CSS: Accessible Checkboxes and Radios Buttons – Clarity Design System – Medium
step-by-step how to style an accessible custom checkbox. Uses opacity:0 to hide the default checkbox
webdesign  web  design  checkbox  accessible  style  css  code  coding  howto  custom  customise  input 
october 2018 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
Customise radio buttons without compromising accessibility
techniques for fancying up radio buttons and maintaining accessibility
webdesign  web  design  css  radio  button  accessible  accessibility 
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
Your skip links are broken - Axess Lab
their intro: Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
webdesign  web  design  accessibility  accessible  navigation  skip  links  a11y 
august 2018 by piperh
I Used The Web For A Day With Just A Keyboard — Smashing Magazine
Many of us are taught to make sure our sites can be used via keyboard. Why is that, and what is it like in practice?
webdesign  web  design  webdev  accessible  accessibility  keyboard 
july 2018 by piperh
Designing for accessibility is not that hard – UX Collective
Seven easy-to-implement guidelines to design a more accessible web
webdesign  web  design  accessible  accessibility  ui  ux  usability 
july 2018 by piperh
Accessibility at a Glance - YouTube
Series on videos by Microsoft about accessibility in website design
webdesign  web  design  accessible  accessibility  ui  ux  usability 
july 2018 by piperh
Accessibility inspector - Firefox Developer Tools | MDN
A brief guide to the Accessibility Inspector in Firefox. They say: This article takes you through the main features of the accessibility inspector and how to use it.
webdesign  web  design  accessible  accessibility  firefox  development  tool  inspector  browser 
july 2018 by piperh
Cards
in-depth exploration of writing code for a card. Some of it seems absurd but there is useful stuff to learn
webdesign  web  design  card  code  coding  html  css  semantic  accessibility  accessible 
june 2018 by piperh
Which accessibility testing tool should you use? – Pulsar – Medium
evaluates a number of different accessibility testing tools and extensions
webdesign  web  design  accessible  accessibility  ui  ux  tools  test  testing  extensions 
may 2018 by piperh
Writing Accessible Web Content | Sparkbox | Web Design and Development
general advice and tips about accessibility. A useful read from a sighted designer who started from scratch, with screen reader and closed eyes
webdesign  web  design  accessible  accessibility  ux  ui 
may 2018 by piperh
Launchy! – An Accessible Modal Window
tabbing stays within modal window when it's invoked - needs the js file (not jquery)
webdesign  web  design  modal  launchy  window  popup  accessible  accessibility  js  javascript  script 
may 2018 by piperh
Designing Accessible Navigations – UX Planet
article title: Designing Accessible Navigations
some v useful tips, especially "skip to content", keyboard shortcuts, structure and lables
webdesign  web  design  accessibility  accessible  navigation  skip 
april 2018 by piperh
Introducing the Accessibility Inspector in the Firefox Developer Tools – Marco's Accessibility Blog
The Accessibility Inspector allows you to inspect your website’s exposure to assistive technologies.
webdesign  web  design  accessibility  accessible  firefox  inspector  tool  developer  webdev 
april 2018 by piperh
My Accessibility Journey: What I’ve Learned So Far · An A List Apart Article
article about accessibility, mostly opinion and the why, but has good list of resources at the end
webdesign  web  design  accessible  accessibility  about  resource  ux  ui 
february 2018 by piperh
Phone number links and accessibility · Matt Smith
article about accessible styling for phone numbers - targetting mobile devices, though wouldn't target VOIP (eg Skype) on desktop. Relies on smaller screen MQ.
webdesign  web  design  style  tel  telephone  number  link  screen  reader  accessible  accessibility 
february 2018 by piperh
Maintaining Accessibility in a Responsive World | Filament Group, Inc., Boston, MA
Filament Group article about coding accessible toggle button for visually hidden content (eg, a nav menu)
webdesign  web  design  toggle  menu  nav  responsive  accessible  accessibility  hidden  visually 
january 2018 by piperh
Building Accessible Menu Systems — Smashing Magazine
about definition of 'drop-downs' etc and accessibility coding
webdesign  web  design  accessible  accessibility  menu  system 
january 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
Modal Dialogs
linked from a11y. Works with IE11 (the others there don't). Micromodal (not linked from a11y) doesn't work with IE11. Requires jQuery
webdesign  web  design  accessible  modal  window  accessibility  js  javascript  script  jquery 
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
Alt-texts: The Ultimate Guide - Axess Lab
v handy guide to alt texts, explaining some do's and dont's and why.
webdesign  web  design  code  coding  alt  text  image  accessibility  accessible  screen  reader 
november 2017 by piperh
handorgel
vanilla ES6, expanding accessible (a11y) drop down accordion for expand/contract texts. Options for open by default, only one div open at a time, and togglable/not togglable. Looks simple and neat
webdesign  web  design  accordion  slide  expand  expandable  accessibility  accessible  js  javascript  script  a11y  css  html  markup 
october 2017 by piperh
Micromodal.js - Tiny javascript library for creating accessible modal dialogs
titled: Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript
Demo doesn't work in Epic or Brave on iPad
webdesign  web  design  js  javascript  script  a11y  accessible  accessibility  modal  library 
october 2017 by piperh
Getting Started with Website Accessibility – Statuscode – Medium
article on Medium by Carrie Fisher:
Getting Started with Website Accessibility
webdesign  web  design  accessible  accessibility 
october 2017 by piperh
Media Player
they say:
Media Player
A tiny, totally cross browser, accessible, fully customizable media player written in plain JavaScript.
webdesign  web  design  js  javascript  script  media  player  video  sound  control  accessibility  accessible 
october 2017 by piperh
CSS outline property - outline: none and outline: 0
single page dedicated only to outline: none; says Don't Do It. Explains why 'outline' is important for accessibility
Includes suggestions on alternatives for outline and focus
webdesign  web  design  code  coding  css  outline  focus  accessible  accessibility 
september 2017 by piperh
Focusing on Focus
David Walsh on focus in browsers with mouse and keyboard
webdesign  web  design  accessibility  accessible  focus  keyboard  mouse  browser  a11y 
august 2017 by piperh
Are you concerned about Accessibility? – Offline Camp – Medium
title: Are you concerned about Accessibility?
How to educate developers on creating accessible websites.
webdesign  web  design  accessibility  accessible  site  website  a11y 
august 2017 by piperh
The Accessibility Cheatsheet
condensed roundup of WCAG guidelines with practical examples, by Ire Aderinokun
webdesign  web  design  accessibility  accessible 
july 2017 by piperh
Accessibility according to actual people with disabilities - Axess Lab
collection of accessibility problems encountered by real users with impairments, by Hampers Sethfors
webdesign  web  design  accessible  accessibility  problem  impairment 
july 2017 by piperh
Accessibility feedback from Twitter
collection of twitter responses to question about accessibility problems encountered by users with impairments, by Hugo Giraudel
hugo  giraudel  accessibility  accessible  webdesign  web  design 
july 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
rems and ems, and why you probably don’t need them – Hacker Noon
article claiming that you don't ever need rem or em, but important to see the discussion comments
webdesign  web  design  rem  em  pixel  size  unit  css  accessible  accessibility  responsive  zoom  zoomable  scale  proportion 
april 2017 by piperh
CSS sidebar toggle - SB
css-only slide-in sidebar (eg, for a menu) using translateX and checkbox. Smooth action (google recommend this type of transition and say don't use width 0 to 100 cos it causes redraws). Actually it isn't css only - there's some js for changed checkbox state
web  design  webdesign  code  css-only  css  checkbox  accessible  menu  sidebar  toggle  slide  slider 
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 https://silvestarbistrovic.from.hr/en/articles/css-sidebar-toggle/ 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
« earlier      
per page:    204080120160

Copy this bookmark:





to read