{"id":3055,"date":"2025-04-05T19:46:14","date_gmt":"2025-04-05T23:46:14","guid":{"rendered":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/?post_type=chapter&p=3055"},"modified":"2025-12-13T16:19:41","modified_gmt":"2025-12-13T21:19:41","slug":"accessible-css","status":"publish","type":"chapter","link":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/chapter\/accessible-css\/","title":{"raw":"Accessible CSS","rendered":"Accessible CSS"},"content":{"raw":"
\r\n

Best CSS Accessibility Practices in<\/h2>\r\n
\r\n

Pressbooks<\/h2>\r\n<\/div>\r\n<\/div>\r\nCascading Style Sheets (CSS) customize the look of HTML elements, such as changing the colour of text, positioning an element at a specific location on a page, or creating decorative elements like borders. When implementing these styles with multiple lines of customization, accessibility should always be a top priority. Although it is possible to write CSS directly into the HTML, writing the CSS into a separate file keeps the HTML page tidy and adheres to good design practices. Some of these practices include:\r\n

Responsive Units<\/h3>\r\nA responsive website has elements that adjust to the screens of various devices, including phones, tablets, and laptops. Units such as %<\/span>, em<\/span>, and rem<\/span> are considered responsive, while non-responsive units of measurement include mm<\/span> , cm<\/span> , in<\/span> , px<\/span> , and pt<\/span>. When using non-responsive units, elements remain the same size across devices, which can cause layout issues with the content. For this reason, responsive units are recommended as they enable accessible design in CSS.\r\n
[h5p id=\"70\"]<\/div>\r\n
\r\n

Text Elements<\/p>\r\n\r\n<\/header>\r\n

Units that are relative (not fixed in size) make elements responsive. When the text of an element is denoted by the unit \"em,\" a change in the parent element's font size will adjust the font size of all its child elements within that unit.Another responsive unit is \"rem,\" where \"r\" stands for root. Instead of adjusting to the parent element, \"rem\" adjusts to the HTML element and is relative to the default settings set by a user on their browser. If an individual has their browser set to a larger font (the default), rem adjusts relative to the size of that default.\r\n\r\nLastly, the % unit can be used to set font size relative to the default text size in your Pressbooks.\r\n\r\n<\/div>\r\n<\/div>\r\n
\r\n

Image Elements<\/p>\r\n\r\n<\/header>\r\n

Use the % unit to adjust the image element's size relative to the width and height of the device\u2019s screen.<\/div>\r\n<\/div>\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<div class<\/span>=\"parent\"<\/span>>\r\n  Hello,<\/span>\r\n    <div class<\/span>=\"child\"><\/span>\r\n      World.<\/span>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\r\n<\/div>\r\n
\r\n
  CSS:\r\n<\/pre>\r\n
.parent<\/span> {\r\n  font-size: 10px<\/span>;\r\n}\r\n\r\n.child<\/span> {\r\n  font-size: 0.5em<\/span>;\r\n}\r\n<\/pre>\r\n<\/div>\r\nAbove, the child<\/span> div is nested in the parent<\/span> div. With font-size:<\/span> 0.5em;<\/span>, it will assume a size half or equivalent to 5 pixels. If the value of the parent element is changed, the child<\/span> will adjust to assume a value half of the parent's.\r\n\r\nTo test these concepts to understand responsive design, visit the MDN Web Docs<\/a> website.\r\n
Reusability of Code<\/h3>\r\nStandardization enables your code to be easily interpreted by different developers who may interact with your Pressbook to either edit directly or re-use it within the context of open education. Organized code also impacts the readers of your book in that visual cohesion and appropriate tagging of elements enable the content to be easily interpreted.\r\n\r\nStandardize repetitions within the CSS rather than using exceptional styles within your HTML, otherwise, the HTML code can become bulky. Notice the cluttered versus cleaned HTML highlighted in the two versions below.\r\n
\r\n
HTML (Cluttered):<\/span><\/pre>\r\n
<div style=<\/span>\"padding: 2.5em; margin: 0.9em 0 0.9em 0; font-family: \"Montserrat\", sans-serif; font-size: 1em; text-align: center; colour: darkgrey;\"<\/span>>\r\n  <h2> An inspiring example of departmental collaboration at <\/h2>\r\n  <div style=<\/span>\"padding: 2.5em; margin: 0.9em 0 0.9em 0; font-family: \"Montserrat\",\r\n  sans-serif; font-size: 1em; text-align: center; colour: black;\"<\/span>>\r\n    <h2> Concordia <\/h2>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\r\n<\/div>\r\n
\r\n
HTML (Clean):<\/span><\/pre>\r\n
<div class=<\/span>\"textbox outer\"<\/span>>\r\n  <h2> An inspiring example of departmental collaboration at <\/h2>\r\n  <div class=<\/span>\"textbox inner\"<\/span>>\r\n    <h2> Concordia <\/h2>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\r\n<\/div>\r\nTo keep your code organized and maintain readability, aim to group repeating properties in a class while setting unique properties in their own IDs. A class is infinitely repeatable, while an ID can only be present once within a page. Classes help standardize your code, ensuring that all instances of a particular element are consistent throughout the website or document, which also prevents clutter in the HTML. You can have two different classes with the CSS colour: black;<\/span><\/span>. For example:\r\n
\r\n
  CSS:\r\n<\/pre>\r\n
.textbox<\/span> {\r\n  padding: 2.5em<\/span>;\r\n  margin: 0.9em 0 0.9em 0<\/span>;\r\n  font-family: \"Montserrat\"<\/span>, sans-serif<\/span>;\r\n  font-size: 1em<\/span>;\r\n  text-align: center<\/span>;\r\n}<\/span>\r\n\r\n.outer<\/span> {\r\n  colour: darkgrey<\/span>;\r\n}<\/span>\r\n\r\n.inner<\/span> {\r\n  colour: black<\/span>;\r\n}<\/span>\r\n<\/pre>\r\n<\/div>\r\n
\r\n
  HTML:<\/pre>\r\n
<div class=<\/span>\"textbox outer\"<\/span>><\/span>\r\n  <h2> An inspiring example of departmental collaboration at<\/span> <\/h2>\r\n  <div class=<\/span>\"textbox inner\"<\/span>>\r\n    <h2> Concordia<\/span> <\/h2>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\r\n<\/div>\r\nObserve the relationship between the CSS and HTML code above. Notice how the textbox<\/span> class selector in the CSS is used in two div<\/span> elements in the HTML. Additionally, styling unique to a specific element can be written into the second class, for instance, the colour. Note that each element attribute can have more than two classes (for example, the first div<\/span> element in the HTML has the classes textbox<\/span> and outer<\/span>).\r\n
Colour Contrast<\/h3>\r\nCertain colour combinations can make it challenging to interpret text; text and background colours should be distinct enough to be easily distinguished. For example, a light blue text on a white background generates a poor contrast ratio, making the words difficult to read.\r\n\r\nColour contrast is rated on a numerical ratio that translates to WCAG 2.0 letter grades; to follow best accessibility practices, we recommend following AA level standards.\r\n\r\nTools for verifying colour contrasts include the WAVE Web Accessibility Evaluation Tools<\/a>, Adobe Colour Tool<\/a>, the WebAIM Contrast Checker<\/a>, and the Accessible Web WCAG Color Contrast Checker<\/a>.\r\n
\r\n
This is bad\r\ncolour contrast.<\/span>\r\n
Contrast Ratio:\r\n1.36 : 1<\/div>\r\n
Does not<\/strong> meet\r\nWCAG Standards<\/span><\/span><\/div>\r\n<\/div>\r\n
This is good\r\ncolour contrast.<\/span>\r\n
Contrast Ratio:\r\n8.57 : 1<\/div>\r\n
Does<\/strong> meet\r\nWCAG Standards<\/span><\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n
Line Height<\/h3>\r\nLines of text displayed too closely may make it challenging to distinguish rows of words. You can solve this by implementing the line-height<\/span> property in the parent container of your text. The property increases the space between lines of words and takes a value of any size units (e.g. px<\/span>, em<\/span>, %<\/span>, etc.)\r\n
\r\n
\r\n\r\nThis text has a line-height property set to 18px. Notice how the space between each line of text is small, making it difficult to read.<\/span>\r\n
Does not\u00a0<\/strong> follow accessibility practices<\/span><\/div>\r\n<\/div>\r\n
\r\n\r\nThis text has a line-height property set to 30px. Notice how the space between each line of text is large, making it easier to read.<\/span>\r\n
Does\u00a0<\/strong> follow good accessibility practices<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n
\r\n
Considering modifying the default theme beyond the theme options provided as part of your Pressbooks project with Concordia University Library? If so, please include your intentions to customize the Cascading Style Sheets (CSS) in the project plan for your open textbook or open guidebook.\u00a0We additionally recommend creating a design plan<\/a>.<\/div>\r\n<\/div>","rendered":"
\n
Best CSS Accessibility Practices in<\/h2>\n
\n
Pressbooks<\/h2>\n<\/div>\n<\/div>\n
Cascading Style Sheets (CSS) customize the look of HTML elements, such as changing the colour of text, positioning an element at a specific location on a page, or creating decorative elements like borders. When implementing these styles with multiple lines of customization, accessibility should always be a top priority. Although it is possible to write CSS directly into the HTML, writing the CSS into a separate file keeps the HTML page tidy and adheres to good design practices. Some of these practices include:<\/p>\n
Responsive Units<\/h3>\n
A responsive website has elements that adjust to the screens of various devices, including phones, tablets, and laptops. Units such as %<\/span>, em<\/span>, and rem<\/span> are considered responsive, while non-responsive units of measurement include mm<\/span> , cm<\/span> , in<\/span> , px<\/span> , and pt<\/span>. When using non-responsive units, elements remain the same size across devices, which can cause layout issues with the content. For this reason, responsive units are recommended as they enable accessible design in CSS.<\/p>\n
\n
\n