Skip to content

Commit

Permalink
Tailor content for junior devs
Browse files Browse the repository at this point in the history
  • Loading branch information
@praesongprasit
praesongprasit committed May 15, 2024
1 parent af08239 commit 36f02da
Showing 1 changed file with 36 additions and 46 deletions.
82 changes: 36 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h2 id="slide2">About me</h2>

<aside class="notes">
<p>First, a little bit about me</p>
<p>I'm a UX engineer. That's what we call developers who specialises in coding up your beautiful designs into something that a user can interact with.</p>
<p>I'm a UX engineer. That's what we call developers who specialises in coding up designs into something that a user can interact with.</p>
<p>I'm working at Xero. But I've previously worked on projects with ANZ bank, and newzealand.com</p>
<p>I'm especially good with accessibility and design systems</p>
<p>In my free time, I practice Japanese archery!</p>
Expand Down Expand Up @@ -115,7 +115,7 @@ <h2 id="slide4">Who is web accessibility for?</h2>
<aside class="notes">
<p>So based on what I've just said, you can guess that answer.</p>
<p>It is for <strong>everyone</strong></p>
<p>By designing a disability friendly experience, you can often benefit wider ranging audience than you think.</p>
<p>By designing & developing a disability friendly experience, you can often benefit wider ranging audience than you think.</p>
</aside>
</section>

Expand Down Expand Up @@ -151,7 +151,7 @@ <h2 id="slide6">The curb cut effect</h2>
<hr>
<p>So not only it's a morally right thing to do</p>
<p>You cover a way larger part of the population than you think!</p>
<p>It also produce genuinely good design. Accessible design feels good.</p>
<p>It also produce genuinely good experiences. Accessible products feels good.</p>
<p>It's demonstrating benefits of universal design at its best!</p>
</aside>
</section>
Expand Down Expand Up @@ -182,24 +182,26 @@ <h2 id="slide8">Accessible sites</h2>
</section>

<section aria-labelledby="slide9">
<h2 id="slide9">How to design<br>an accessible experience?</h2>
<h2 id="slide9">Develop an accessible experience</h2>
<p>Where to start?</p>
</section>


<section aria-labelledby="slide10">
<h3 id="slide10">Try keyboard only</h3>
<p>
Start with content, not visuals
Can you navigate your website with only keyboard?
</p>

<aside class="notes">
<p>You may have been sick of the 'content is king' saying</p>
<p>There's no truer saying in the field of accessibility</p>
<p>What are the users actually on your web product for?</p>
<p>It's information and services. Visuals is a secondary way to deliver that information</p>
<p>When I work with a designer who starts imagining a flow in pure text experience first, 70-80% of the accessibility problems will be resolved at the design phase.</p>
<p>Then it is up to UX engineers like me to drive the rest home, using the most semantic HTML code possible</p>
<p>You'll quickly learn to use tab and arrow keys to swiftly move around the app</p>
<p>If there are some parts that you cannot get to with keyboard, it's not accessible</p>
</aside>
</section>

<section aria-labelledby="slide10">
<h3 id="slide10">Linear text experience</h3>
<p class="fragment" data-fragment-index="1">
<section aria-labelledby="slide11">
<h3 id="slide10">Test with styles turned off</h3>
<p>
❤️ by keyboard only users, <br>screen readers, <br>people with different cognitive abilities
</p>

Expand All @@ -208,43 +210,18 @@ <h3 id="slide10">Linear text experience</h3>
<p>But often, it's very hard to translate the 'feel' of colours and typography to access needs users, using assitive tools.</p>
<p>As a sighted user, I can quickly scan the visuals to understand what your product and services is about.</p>
<p>Screen reader users and keyboard users cannot take so much information all at once. Their tool only let them interact with your product one text or input at a time. So think about your user flow, and make sure to design that order explicitly and clearly. Don't make people jump around your page.</p>
<p>The best designers and designs I've ever worked with, start from a linear text experience, which can be easily understood what read out loud.</p>
</aside>
</section>

<section aria-labelledby="slide11">
<h3 id="slide11">Multiple ways to convey information</h3>
<p class="fragment" data-fragment-index="1">
Text, video, audio, non-coloured visual treatments
</p>

<aside class="notes">
<p>Another thing to do is to provide multiple ways to convey information</p>
<p>When displaying images, think of how you want to explain that image to a friend over the phone. That's the text developers need from you to implement as an alt text.</p>
<p>When posting a video, enable closed caption and or audio description for those who cannot hear, is working in a loud area without a headphone.</p>
<p>When creating a podcast, provide transcript of the conversation. As a bonus, that is also good for SEO/google search!</p>
<p>When showing errors, make sure to use other visual cues that this is an error, not just colours, because colourblind users will not see those colours.</p>
<p>Try turning all the styles off. Does your app still make sense if you read it? If the order is weird, it'll be weird for assistive tech users</p>
<p>Use keyboard to tab through </p>
</aside>
</section>

<section aria-labelledby="slide12">
<h3 id="slide12">Overwhelmed?</h3>
<p>
Start with higher contrast and larger font
</p>

<aside class="notes">
<p><a href="https://color.review/">Color review</a> - For checking colour contrast</p>
</aside>
</section>

<section aria-labelledby="slide14">
<h2 id="slide14">Where can coders start?</h2>
<h3 id="slide14">Add meaningful alt text!</h3>
<img src="https://images.squarespace-cdn.com/content/v1/5a03992bd0e628ea50a2cc92/1629525683053-NV463IBGN3272E3F9EX8/Donut+sprinkle+bite+3.jpg?format=2500w" alt="Bitten off delicious looking ring donuts, sprinkled with hundred and thousands held up in-front of Sixes and Sevens sign" />
</section>

<section aria-labelledby="slide13">
<h2 id="slide13">Where can coders start?</h2>
<h2 id="slide13">Example alt text</h2>
<pre>
<code data-trim data-noescape class="language-html">
&lt;img
Expand All @@ -260,19 +237,32 @@ <h2 id="slide13">Where can coders start?</h2>
<ul>
<li>Add in your alt text</li>
<li>Code in linear order</li>
<li>If already on socials, do this on your photos!</li>
</ul>
</aside>
</section>

<section aria-labelledby="slide14">
<h3 id="slide11">Apply recommended practices</h3>
<p>
Use linter to enforce those HTML and framework practices!
</p>

<aside class="notes">
<p>In the past, I used to recommend people learning HTML basics... but no one would now. They all use frameworks</p>
<p>Reputable frameworks like React, Flutter, and etc. are getting better at enforcing some of the practices that makes sites more accessible.</p>
</aside>
</section>

<section aria-labelledby="slide13">
<h2 id="slide13">Accessibility is a right</h2>
<p class="fragment" data-fragment-index="1">
<p>
to <em>equal access</em> of <em>your</em> information and services</p>

<aside class="notes">
<p>I'm speaking to the future designers, who will go out there and create useful experiences for lots of people.</p>
<p>I'm speaking to the you developers, who will go out there and create useful experiences for lots of people.</p>
<p>I want us all to remember, that accessibility is a right</p>
<p>When us creators design things without ease of access in mind, we DISABLE people. We take away their rights.</p>
<p>When us creators make things without ease of access in mind, we DISABLE people. We take away their rights.</p>
<p>People can be disabled in many ways, be it permanently, temporarily, and situationally.</p>
<p>We can help prevent that, by creating clear linear text experience, and provide multiple ways to access products and services.</p>
<p>By creating accessible designs, your design will become more valuable and usable by more people.</p>
Expand Down

0 comments on commit 36f02da

Please sign in to comment.