class: middle center # Maths accessibility ## what is it about? <hr> ### David Hodge ### Glasgow Caledonian University ### david.hodge@gcu.ac.uk --- layout:true background-image: url(images/GCUlogoP293.png) background-position: 98% 2% background-size: 150px class: middle background-color: var(--secondary) --- # Topics + Alt text + Colours + Language + Navigation + Responsiveness + Structure + Videos --- name: alt-text-slide ## Alt text Text hidden behind a visual element on a page. Providing some alternative text to provide things like **context**, **purpose** and **educational importance** of the content. + Graphs -- Yes! + Equations -- Not really, delegate the workload to... + Tables -- Sure, but also... + Pictures / diagrams -- Yes! *Long description* text may be more appropriate for complex diagrams, images or graphs. .content-box-purple[ **Note** See [image description](https://www.w3.org/WAI/tutorials/images/complex/) associated with this image. ] --- ## Colours Some of your students will have forms of colour vision deficiency (colour blindness). There are some excellent tools to quickly simulate their viewpoints. + Colour contrast checkers - Most deficiencies can still distinguish lightness - Resolution, not just colour, is important too + CVD/Colourblind-friendly palettes + CVD simulators (**Web Disability Simulator** and others) --- ## Language Are we using unnecessarily complicated or outdated language? + Maths naturally contains technical terminology + Don't make students lives even harder than needed --- ## Navigation This refers to the ability of a viewer to move around your document. Normally using the .box[Tab &#11134;] key. + **Accessibility Insights for Web** Chrome plug-in (Tab stops) + Tables of contents with internal hyperlinks --- ## Responsiveness This refers to a page's **automatic resizing** based upon the window size the user is viewing with. + On a phone or tablet this is often fixed to the physical pixel size of the screen + On a PC or laptop this depends upon the current size of the browser window For PDFs, viewers may need zooming tools, which are particularly difficult on a phone. For HTML there are nice templates which seamlessly change the format, along with easy browser zoom control. --- ## Structure It's important that the headings, normally signified by larger text, are identifiable by screen readers. + Section headings + Subsection headings etc... + Headers and footers + Table headers Some screen readers will tell listeners about the object before reading, so make sure they are labelled. --- ## Videos I'm sure you've all been asked to caption videos by now... + Captions, embedded syncronised text with video + Transcripts, text version of words spoken in video Youtube auto-captioning is very good for many people, as is their interface to editing captions. Many different tools out there. --- # Tools + Gitbook toolbar, for those that generate HTMLs ([Sample Gitbook](https://becarioprecario.bitbucket.io/spde-gitbook/ch-INLA.html#sec:non-linear)) + Alt text Chrome plug-in (good practice at [BBC Website](https://www.bbc.co.uk/news/science_and_environment)) + Read & Write Chrome plug-in + WAVE Chrome plug-in Link to [www.ecu.ac.uk](https://www.ecu.ac.uk) to see tools in action. --- class: center, middle # Thanks! --- # Bonus links slide for accessiblity tools (many are plug-ins for Chrome only) + [Web Disability Simulator](https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla) + [Image Alt Text Viewer](https://chrome.google.com/webstore/detail/image-alt-text-viewer/nhmihbneenlkbjjpbimhegikadfleccd) + [Read&Write for Google Chrome](https://chrome.google.com/webstore/detail/readwrite-for-google-chro/inoeonmfapjbbkmdafoankkfajkcphgd) + [Wave Evaluation Tool](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) - Versions exist for other browsers, - also at a website [Wave Tool online](https://wave.webaim.org/) + [Access Assistant](https://chrome.google.com/webstore/detail/access-assistant/ojiighldhdmahfdnhfdebnpmlbiemdfm) + [Accessibility Insights for Web](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni) --- # Bonus slide for colours links to a few nice colour contrast tools + [A11y Rocks colour palette checker](http://a11yrocks.com/colorPalette/) + [Colour palette checker by Deque](https://color-contrast-checker.deque.com/) + [Colour contrast tool by Learn UI Design](https://www.learnui.design/tools/accessible-color-generator.html) --- # Bonus RMarkdown slide --- name: mdd class: markdowndemo, scriptsize ## Markdown demo .pull-left[ <!-- I've put css which draws a box around pre-formatted text inside an rmarkdowndemo slide inside pull-left --> ### The markdown code ```text + Hello + Me Here is a small equation: $x^2+y^2=z^2.$ Or maybe a big equation, $$\int_{0}^{\infty}e^{-x^2}\,\textrm{d}x$$ \begin{equation}x^2+y^2\label{eq:abc}\end{equation} That previous equation is numbered \eqref{eq:abc}. ``` ] .pull-right[ ### The output .boxed[ <!-- I've put a boxed class into the css --> + Hello + Me Here is a small equation: `\(x^2+y^2=z^2.\)` Or maybe a big equation, `$$\int_{0}^{\infty}e^{-x^2}\,\textrm{d}x$$` \begin{equation}x^2+y^2\label{eq:abc}\end{equation} That previous equation is numbered \eqref{eq:abc}. ] ] --- name: rdemo class: rdemolayout ## R demonstration .pull-left[ ### R code block <!-- pre formatted boxes get dashed boundaries, see css --> ```r for(i in 1:10){ print(i^2) } ``` ] .pull-right[ ### R code output ``` ## [1] 1 ## [1] 4 ## [1] 9 ## [1] 16 ## [1] 25 ## [1] 36 ## [1] 49 ## [1] 64 ## [1] 81 ## [1] 100 ``` ]