Since CSS animations are now so well supported using an animated .gif for a loading spinner is now no longer necessary. The mighty Developer Jon Pearse, showed me how to make a CSS loading spinner so I thought I’d share his technique using a flexible SCSS mixin step by step. This spinner will work inContinueContinue reading “How to create a simple CSS loading spinner & make it accessible”
Category Archives: web
Short note on what CSS display properties do to table semantics
The CSS display properties are powerful. You can change the visual display of elements to match your desired styling, but sometimes doing this can have an unintended effect of nuking the semantics of the elements, as conveyed to screen reading software, in the browser accessibility tree. Screen readers and other assistive tech, in general, do not have directContinueContinue reading “Short note on what CSS display properties do to table semantics “
Hey, It’s Still OK to Use Tables
Consider this post to be the sequel to my 2012 post It’s OK to Use Tables. Here I will go into bit more detail based on the state of accessible efforts I see today. In that post I identified two scenarios I see frequently as a result of developers blindly following the don’t use tablesContinueContinue reading “Hey, It’s Still OK to Use Tables”
30 Helpful Resources for Improving Mobile and Web Accessibility
Creating accessible apps and websites is everyone’s responsibility, from designers and content strategists to developers and testers. Adopting accessibility practices into your workflow will make accessibility an inherent part of your process, no matter your role, and ultimately lead to a better product. To help you create apps and sites that everyone can use, weContinueContinue reading “30 Helpful Resources for Improving Mobile and Web Accessibility”
OS: High Contrast versus Inverted Colors
There are different ways to make a web page more easy to read, but there are two options that come directly from the operating system that many developers and designers seem to confuse — high contrast and inverted colors. While the confusion may not be a big deal in most contexts, when talking about implementingContinueContinue reading “OS: High Contrast versus Inverted Colors”
Text Splitting Causes Screen Reader Problems – Axess Lab
I am a screen reader user, and I am annoyed! I repeatedly encounter the same problem on websites. It’s about text splitting up. Let me share my agony with you! … The solution: role=”text” We had a similar problem on our site with headings, but the solution I used will work for links as well.ContinueContinue reading “Text Splitting Causes Screen Reader Problems – Axess Lab”
Document Outlines in HTML 5.1
In one of my previous articles, Using Heading Elements to Create a Document Outline, I explained the importance of having valid outlines in an HTML page. The outline for an HTML document shows the structure of the content on the page. This is useful for user agents, who can use the outline to create, for example,ContinueContinue reading “Document Outlines in HTML 5.1”
Advocating for Accessible UI Design | CSS-Tricks
Accessibility is a hot topic these days, and the older we web-makers get, the hotter it’s going to become! That might be a snarky outlook, but what I’m trying to say is that it’s about time we start designing the web for everyone because the web was meant to be for everyone, and less and less areContinueContinue reading “Advocating for Accessible UI Design | CSS-Tricks”
NEW FEATURES IN WEB CONTENT ACCESSIBILITY GUIDELINES 2.1 AND WHAT YOU NEED TO DO
In January there was a recent update to the WCAG that introduced some changes in what’s expected of you as a developer to make your web content accessible. The majority of these are fairly obvious and straightforward, with some nice additions that enhance accessibility on smaller hand-held devices. Criterion Conformance Level 1.3.4 Identify Common Purpose AA 1.3.5ContinueContinue reading “NEW FEATURES IN WEB CONTENT ACCESSIBILITY GUIDELINES 2.1 AND WHAT YOU NEED TO DO”
Accessibility: Usability for all | Interaction Design Foundation
Let’s examine a topic we often take for granted to understand what it’s really about. Doing so, you’ll be able to proceed with a broader appreciation of how users engage your designs. … A design is only useful if it’s accessible to the user: any user, anywhere, anytime. We often mistake the concept of accessibility as involving people with disabilities. However, we’re all disabledContinueContinue reading “Accessibility: Usability for all | Interaction Design Foundation”
The math of CSS locks
A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other. … I found this technique in Tim’s article and, when I tried wrapping my head around it, and creating variants of it,ContinueContinue reading “The math of CSS locks”
Accessible Dynamic Links
Although hyperlinks are the soul of the World Wide Web, it’s worth using them in moderation. Too many links becomes a barrier for visitors navigating their way through a page. This difficulty is multiplied when the visitor is using assistive technology, or is using a keyboard; being able to skip over a block of linksContinueContinue reading “Accessible Dynamic Links”
Accessibility Through Semantic HTML ◆ 24 ways
Working on Better, a tracker blocker, I spend an awful lot of my time with my nose in other people’s page sources. I’m mostly there looking for harmful tracking scripts, but often notice the HTML on some of the world’s most popular sites is in a sad state of neglect. What does neglected HTML look like?ContinueContinue reading “Accessibility Through Semantic HTML ◆ 24 ways”
Website Design: Inclusive Experiences Part 1 Visual: Colours and shapes
Why is accessibility important? In order for the consumer to have an overall positive experience, it is strongly recommended that your project is designed to be inclusive. If the right accessibility isn’t in place, it could exclude consumers who may struggle or even be unable to interact with the project. The information that will be covered inContinueContinue reading “Website Design: Inclusive Experiences Part 1 Visual: Colours and shapes”
Web Accessibility Testing Tools: The Practical Role of Automated Checkers
With the proliferation of actions taken against organizations with websites and web applications that are not perceivable and usable by someone with a vision, hearing, mobility and/or cognitive disabilities, it is only natural that institutions would respond by seeking out automated testing tools that can scan an entire web-based experience and report accessibility issues. AtContinueContinue reading “Web Accessibility Testing Tools: The Practical Role of Automated Checkers”
What Does Inclusive Design Mean?
Why is accessibilty seen as an after-thought, or at worst an expense to help a handful of disadvantaged people? Have you ever tried using a website or app on your smartphone whilst riding a bus when the sun is streaming through the window? You probably have. How did that work out for you? … …theContinueContinue reading “What Does Inclusive Design Mean?”
UXMAS advent calendar for UX folk.
It’s on again. The excellent UXMAS advent calendar for UX folk.
UI Options
UI OptionsObjectiveEasily add UI Options to your website. Add a simple separated-panel preferences editor to any page.DescriptionUI Options adds a simple preferences editor dialog with a set of six panels in a collapsible panel at the top of the page, accessible through a button in the upper right corner of the page. Curated by (Lifekludger)ContinueContinue reading “UI Options “
Alt-texts: The Ultimate Guide
This post contains everything you need to know about alt-texts! When to use them and how to perfectly craft them. By me, Daniel, a web developer with vision impairment who use a screen reader in my day-to-day life. Curated by (Lifekludger) Read full article at Source: Alt-texts: The Ultimate Guide – Axess Lab
How Current Design Trends Impact Web Accessibility
“You are not your users.” “Involve people with disabilities in user testing.” “The average user does not exist.” “Design for the extremes, and the middle will take care of itself.” We hear these phrases all the time, yet a lot of people still believe that accessibility is mostly a quality assurance or developer’s responsibility, somethingContinueContinue reading “How Current Design Trends Impact Web Accessibility”
Writing CSS with Accessibility in Mind
An introduction to web accessibility. Tips on how to improve the accessibility of your web sites and apps with CSS. … a lot of things have changed and CSS now gives us an incredible set of tools to style the web. We went from Verdana to Webfonts, from fixed widths to Responsive Web Design, from table-based layouts to Grid, andContinueContinue reading “Writing CSS with Accessibility in Mind”
Accessible website design for users with disabilities lags far behind demand
“The internet is, in essence, broken,” said Todd Bankofier, the CEO of accessibility software company AudioEye. Last week the company announced a partnership with web design firm Dealer Inspire, which makes customer-facing sites for auto retailers, to implement AudioEye’s Ally Toolbar across their entire portfolio. The move “expands our reach immediately, making it much moreContinueContinue reading “Accessible website design for users with disabilities lags far behind demand”
21 Chrome Extensions for Special Needs
21 Chrome Extensions for Struggling Students and Special Needs Technology can be a powerful tool to assist students with special needs or any sort of learning challenge. In particular the Chrome web browser allows users to install a wide variety of web extensions that provide tools that can help all learners, regardless of ability level.InContinueContinue reading “21 Chrome Extensions for Special Needs”
Easy Checks – A First Review of Web Accessibility | (WAI) | W3C
Easy Checks – A First Review of Web Accessibility This page helps you start to assess the accessibility of a web page. With these simple steps, you can get an idea whether or not accessibility is addressed in even the most basic way. These checks cover just a few accessibility issues and are designed toContinueContinue reading “Easy Checks – A First Review of Web Accessibility | (WAI) | W3C”
An Introduction to the Reduced Motion Media Query | CSS-Tricks
The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript. Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able toContinueContinue reading “An Introduction to the Reduced Motion Media Query | CSS-Tricks”
