Skip to main content

Navigating WCAG 2.1: A Step-by-Step Approach for Developers

 Get Familiar with WCAG 2.1: WCAG 2.1 is like the rulebook for web accessibility. It's split into four parts: Perceivable, Operable, Understandable, and Robust (POUR). For instance, "Perceivable" includes rules like giving all images a text description (alt text) for folks who can't see them.  Run an Accessibility Audit: Use tools like Google Lighthouse or WAVE to scan your site. They'll flag up stuff like missing alt text, low color contrast, or form fields without labels.  Manual Testing: Automated tools can't catch everything. You'll need up roll to your sleeves and do some manual testing. Try navigating your site using only your keyboard, or using a screen reader like NVDA or VoiceOver. You're checking that all content and functionality is accessible.   Write an Accessibility Statement: This is a page on your site where you talk about your commitment to accessibility. You could mention that you're aiming for WCAG 2.1 Level AA compliance, lis

Regular Expressions cheat sheet

Cheat Sheet

CharacterMeaningExample
^the beginning of the string
$the end of the string
\bwhole word only\babc\b matches 'abc', but not 'abcc '
\Bif the pattern is fully surrounded by word\Babc\B mathes 'aabcc', but not 'abc'
.anything
\dsingle digit in 0-9
\Dsingle non-digit
\wsingle word character
\Wsingle non-word
\swhite space(space, tab, return, new line)
\Snon-whitespace
\ttab
\rreturn
\nnew line
\gglobal search, which means it doesn't stop at the first match
*zero or more of the previousabc* matches a string that has ab followed by zero or more c
+one or more of the previousabc+ matches a string that has ab followed by one or more c
?zero or one of the previousabc? matches a string that has ab followed by zero or one c
?:non-capturing group
X{m}number of X === m
X{m,}m < number of X
X{m, n}m < number of X < n
(X | Y)X or Y
[...]any of characters in the class[abcd] matches a string that has one of the char (a, b, c, d)
-range[a-d] same as above

Key words from the cheat sheet

Anchor
Anchor is not a pattern, it is a position.
It matches a position before, after or between characters.
For example, ^ is the beginning of the string, and it is also a start of line anchor.


Boundaries
\b is a word boundary because \babc\b has to match the whole word abc.
\B is non-word-boundary because \Babc\B means any words that includes abc (abcc, eabc).


Quantifiers
Greedy: The optional item is included in the match if possible. ? is a typical example of greedy quantifiers. abc? can match either abc or ab.
Lazy: * The optional item is excluded in the match if possible. ?? is a typical one because abc?? only matches ab.

Non-capturing group
?: means the pattern doesn't capture to the group. It usually uses with .match(). So if you use ?:, then the pattern won't be included to the array.

Comments

Popular posts from this blog

Flexbox CSS Cheat Sheet by Learnpine

 

Navigating WCAG 2.1: A Step-by-Step Approach for Developers

 Get Familiar with WCAG 2.1: WCAG 2.1 is like the rulebook for web accessibility. It's split into four parts: Perceivable, Operable, Understandable, and Robust (POUR). For instance, "Perceivable" includes rules like giving all images a text description (alt text) for folks who can't see them.  Run an Accessibility Audit: Use tools like Google Lighthouse or WAVE to scan your site. They'll flag up stuff like missing alt text, low color contrast, or form fields without labels.  Manual Testing: Automated tools can't catch everything. You'll need up roll to your sleeves and do some manual testing. Try navigating your site using only your keyboard, or using a screen reader like NVDA or VoiceOver. You're checking that all content and functionality is accessible.   Write an Accessibility Statement: This is a page on your site where you talk about your commitment to accessibility. You could mention that you're aiming for WCAG 2.1 Level AA compliance, lis

Free classic icon libraries for developers

Hello techies,  Here are a few Best free icon libraries Material UI Icons Great set of icons available free to download in SVG and PNG format. Feather Icons Big list of icons with option to change size and color Zondi Icons A few list of standard icons available free to download Hero Icons Variety of icons free to copy as SVG format and can be used within JSX Hero Pattern Good number of SVG patterns available free to download and use for your application. The Noun Project One of the best place to download creative icons but, needs to give credits to creators. .