<p>Mikkel Flyvebom is a professor at Copenhagen Business School. In his talk, he discusses recommendation systems. He explains that recommendation systems are information feeds, such as those seen on Netflix or Facebook. These systems have become a critical part of our daily lives, influencing what we read, watch, and buy. However, they are not neutral and can have negative ethical, cultural, and political implications.</p>

<p>For instance, why is being an astronaut the most desirable job for a 14-year-old in China, while in the USA it is being an influencer? How is it that a child's TikTok feed in China differs significantly from one in the USA? And why does a child in China see primarily content related to child's age, such as explainer videos, scientific experiments, while a child in the USA has a feed that is mostly unfiltered with entirely different content?</p><p>Flyvebom argues that we need to have meaningful conversations about these systems and consider their context of use. For instance, we should prioritise creating recommender systems that are aligned with our values and provide us with meaningful content - especially for those who will shape the next generation.</p>

<p>Bo Bergstedt, a representative from Danish TV2, gave a fascinating talk on the future of deepfakes and AI-generated content. He highlighted the power of AI to create hyper-realistic fake images and videos, which can be used to spread disinformation and undermine trust in the media. For example, how can celebrities like Matthew McConaughey, Nicki Minaj, Greta Thunberg, and Stormzy be featured in the same TV show without ever appearing together in real life?</p>

<p>With the rise of deepfakes, it is crucial to ensure that we can trust the authenticity of the content we consume. Additionally, we need to develop future technology to detect and combat deepfakes effectively.</p>

<p>Agnes Stenbom's talk focused on imagining possible futures. She emphasized the need for media content to adapt rapidly. According to her, over 32% of people in Sweden avoid news due to its stressful and negative nature, and this number is even higher globally. This raises questions about the importance of education and how to prevent the spread of disinformation. Stenbom argued that AI can provide new ways of consuming media with a clear focus on users, but the industry needs to quickly transform and reconsider its role in this new landscape. It's important to imagine all possible futures, not just one.</p>

<p>Overall, the Nordic AI in Media Summit 2023 provided a thought-provoking glimpse into the future of AI in media. The conference included two fully-packed days of new information and ideas, including some difficult ethical, political, and cultural questions. It's essential to keep asking these questions and have meaningful discussions on these topics, as artificial intelligence will inevitably become a part of our lives sooner than we may have imagined.</p>

V GoodRequest berieme budúcnosť vážne. So vzostupom AI sme si plne vedomí jej možných dôsledkov. Aby sme lepšie porozumeli tejto technológii, zúčastnili sme sa tohtoročnej konferencie Nordic AI in Media Summit v Kodani. Zišli sa tu odborníci z celej Európy a severských médií, aby diskutovali o aktuálnom stave AI v médiách. Tu je súhrn troch najzaujímavých rozhovorov a otázok, ktoré by sme mali zvážiť.

Report z Nordic AI Summit: Budúcnosť etiky v umelej inteligencii

AI Summit in Nordic Media GoodRequest recommends.png

AI Summit in Nordic Media.png

Beata Biskupicova

At GoodRequest, we take the future seriously. With the rise of AI, we are fully aware of its possible implications. To better understand this technology, we attended this year's Nordic AI in Media Summit in Copenhagen. Experts from all over Europe and Nordic media gathered here to discuss AI's current state in media. Here is a summary of three particularly interesting talks and questions that we should all consider.

Report from Nordic AI Summit: The future of ethics in Artificial intelligence

LinkedIn

Contact us

<p style="margin-left:0px;">Need help with a project? Do not hesitate to contact me!</p>

We are here to help you

<p>To begin with, I recommend that you also take a look at our article with an introduction to accessibility, in which you will read everything you need to understand the basics.</p>

<h2>Inoperative keyboard navigation and hidden focus</h2><p>Not everyone uses a mouse to navigate the web. Some cannot use a mouse due to illness, experienced users control the web using a keyboard or we control the web on TV via a remote control... Such users rely on the fact that all interactive elements on the web, e.g. buttons, links or forms have their own focus state.</p><p>You probably wouldn't like it if you didn't see the cursor on the web. However, we often do this for users who navigate the web using a keyboard.</p><pre><code class="language-css">body {
  cursor: none; /* you certainly wouldn't do this on the web */
}

:focus {
  outline: none; /* so, please don't do this either */
}
</code></pre><p>However, <code>:focus</code> has one feature that forces developers to remove the <code>outline</code>. When clicking with the mouse, e.g. the button has a frame around it, which doesn't look good. In modern browsers, we can easily solve this problem if we use <code>:focus-visible</code> instead of <code>:focus</code>. This selector is already supported by all modern browsers, and thanks to it, the frame is only displayed when navigating using the keyboard (we focus on the button via the <code>Tab</code> key).</p><p>We usually want a custom style for the focus state that fits our design better. Then we can override the default style of the browser, but we must be careful that it is visually distinct enough.</p><pre><code class="language-css">// Example how we can add our own style for focus state
button:focus-visible {
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}</code></pre>

<h3>Tabindex</h3><p>Interactive elements such as button, form fields or links are tabable and do not need to implement anything additionally. If we want to achieve this, e.g. for <code>&lt;div&gt;</code> we can assign it <code>&lt;div tabindex=”0”&gt;</code>. We can use such an option, e.g. in interactive charts that do not have a representing tag in HTML. If we want to achieve the opposite effect, i.e. turn off interactivity (we cannot mark an element with the <code>Tab</code> key), we use <code>tabindex="-1"</code>. We should not use any other values for <code>tabindex</code>, because they change the order of the elements, which we usually do not want.</p><blockquote><p>ℹ️ Regarding this topic, I recommend also looking at the article <a href="https://hidde.blog/indicating-focus-to-improve-accessibility/">Indicating focus to improve accessibility</a>, which goes into more detail.</p></blockquote><h2>Semantic HTML and why not use div everywhere</h2><p>HTML contains a number of tags that semantically describe the content on the web. If we use it correctly, e.g. we use <code>&lt;nav&gt;</code> for navigation, fill each input with <code>&lt;label&gt;</code> or write interactive elements as <code>&lt;button&gt;</code>, so screen readers will better understand the content and structure of the website.</p><blockquote><p>ℹ️ ️ ️ In addition, semantic HTML helps search engines to better understand the content of the page, which also has a significant impact on the position in search engines.</p></blockquote><p>Why it is important to use the correct HTML tags can be seen on the button:</p><pre><code class="language-css">// Bad example
&lt;div className="button" onClick={handleClick}&gt;
  Open something
&lt;/div&gt;

// Good example
&lt;button className="button" onClick={handleClick}&gt;
  Open something
&lt;/button&gt;
</code></pre><div class="raw-html-embed"><iframe src="https://codesandbox.io/embed/distracted-goldwasser-o7d9j5?fontsize=14&amp;hidenavigation=1&amp;theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="distracted-goldwasser-o7d9j5" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe></div><p>&nbsp;</p><p>At first glance, the button works. When I click the mouse, the <code>handleClick</code> function is called just like for the <code>div</code> and for the <code>button</code>. However, if I navigate the website using the keyboard (a combination of <code>Tab</code> and <code>Enter</code>), the div becomes unusable. The browser automatically added the necessary functionality to the native <code>&lt;button&gt;</code> tag, e.g. tabindex or focus state.</p><blockquote><p>ℹ️ A very well prepared material on all HTML tags is on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">MDN Web Docs</a>.</p></blockquote><h2>Prohibited page zoom</h2><p>In order for the website to be accessible, according to the <a href="https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html">WCAG specification</a>, the user can zoom in on the website by at least 200% without limiting the functionality of the page. The <code>user-scalable="no"</code> parameter in <code>&lt;meta name="viewport"&gt;</code> disables zooming of web content. Similarly, the <code>maximum-scale=1</code> parameter limits the extent to which the user can zoom in on the content. Therefore, these two parameters are limiting for visually impaired users for whom zooming in on content is key.</p><pre><code class="language-html">// Never forbid a zoom
&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
&lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;

// This is the right way
&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
</code></pre><h2>Size of typography in pixels</h2><p>Developers are often faced with the dilemma of whether to use <code>px</code> or <code>rem/em</code> units. Pixels still have a place in CSS and there are situations when it is better (also from the point of view of accessibility) to use <code>px</code>. But where we definitely want to use <code>rem</code> or <code>em</code> instead of pixels is typography. Thanks to this, the user can adjust the font size in the browser settings. If we use <code>px</code> , we will take this option away from the user.</p>

<p>&nbsp;</p><blockquote><p>ℹ️ Excellent material about when to use rem or px can be found in the article: <a href="https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/">The Surprising Truth About Pixels and Accessibility</a></p></blockquote><h2>(In)accessible components</h2><p>On the web, we often use more advanced components, e.g. modal, datepicker, etc. Usually, for such components, we reach for an existing UI framework such as e.g. MUI, Ant Design or Radix UI. Therefore, it is important to check whether it supports accessibility when choosing a UI library. We often find a section on accessibility in the documentation, which I definitely recommend to always read. Usually there you will find tips on how to make the component accessible.</p>

<p>If we want to create our own component, we have to think about a lot of details. On the <a href="w3.org">W3.org</a> website you will find procedures on how to implement frequently used components. That's why it's sometimes more appropriate to choose a UI library that will solve it for us. Just coding your own modal may not be as easy as it might seem at first glance:</p><ul><li><code>Escape</code> closes the modal</li><li>When opening the modal, it automatically focuses on the first interactive element</li><li>When the modal is closed, the focus will automatically return to the last focused element</li><li>Focus is locked within the modal (I can tab only elements in the modal)</li><li>The modal has the role of <code>dialog, aria-labelledby</code> refers to the title of the modal and <code>aria-describedby</code> refers to the content that describes the meaning of the modal.</li><li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">And a few more rules…</a></li></ul><p>On our projects, we started using the <a href="https://www.radix-ui.com/">Radix</a> UI library, which handles accessibility and most of the functionality for us, and at the same time allows us to style the component as needed.</p><h2>Conclusion</h2><p>These few tips can significantly improve accessibility and, in addition, improve SEO and website quality. You can find more tips on how to improve accessibility in our first article.</p>

‍V tomto článku si predstavíme ďalších 5 najčastejších chýb prístupnosti, ktoré sa na weboch často opakujú a ako ich jednoducho opraviť. Už len fixnutím týchto zopár problémov vieme výrazne zlepšiť prístupnosť na webe.

10 najčastejších problémov s prístupnosťou (2. časť)

Accessibility 10 most common problems.png

Prístupnosť na webe 10 najčastejších problémov.png

Andrej Nemeček

‍In this article, we present the other 5 most common mistakes that are often repeated on websites and how to easily fix them. Just by fixing these few problems, we can significantly improve accessibility on the web.

The 10 most common accessibility problems (Part 2)

<h2>More than 85,000 application users voted for the best mobile application in banking in the survey!</h2><p><a href="https://www.mojandroid.sk/">MojAndroid.sk</a> regularly brings a survey where people decide<strong> on the best mobile bank application.</strong> This is the eighth year of the <a href="https://www.smartbanka.sk/">Smart Bank 2023</a> survey. We are really proud and we look forward to the success of our partner Tatra banka, who <a href="https://www.smartbanka.sk/vysledky/"><strong>won the eighth time in a row</strong></a>.&nbsp;</p><p>Mobile applications were evaluated on the basis of the SmartBanka Index, which is based on information obtained from real users. It takes into account the positives and negatives that clients may have encountered. Having more than 195k points confirms customer satisfaction with the usability and functionality of the banking application.</p>

<p style="margin-left:0px;">The sympathy award goes to Tatra banka again this year, as 47.11% of voters answered the question "Which bank do you think has the best banking application?" answered that Tatra banka.</p><p>We <strong>have been involved in the development of an innovative mobile application </strong>for <strong>Tatra banka</strong> for the third year in a row, and such awards will always make us very happy. They are valuable feedback on our work and we are glad that we are part of such a successful digital product. If you are interested in our part of the work, take a look at the case study and <a href="https://www.goodrequest.com/work/tatra-banka-sk"><strong>find out how the best mobile banking is created.</strong></a></p><p>Last but not least, we send a big congratulations to Tatra banka's Mobile Banking Department!</p><h2>You can find mobile applications and reviews of satisfied clients directly on Google Play and the App store:</h2>

Anketa Smart Banka poskytuje každoročne pohľad na mienku a názory verejnosti na bankové mobilné aplikácie. Náš partner Tatra banka v súťaži obhajoval tento rok prvenstvo. Dnes môžeme hrdo oznámiť, že ôsmy ročník ankety Smart Banka opäť získala mobilná aplikácia, na ktorej vývoji pracujeme.

Tatra banka obhajuje prvenstvo! Ôsmykrát po sebe sa stáva bankou s najlepšou mobilnou aplikáciou.

TatraBanka-Hero.png

TatraBanka-Thumb.png

Bruno Grinč

Smart Bank survey provides an annual view of public opinion on banking mobile applications. Our partner Tatra banka defended its first place in the competition this year. Today, we can proudly announce that the eighth year of the Smart Bank survey was once again dominated by the mobile application we are working on.

Tatra banka defends first place! For the eighth time in a row, it becomes the bank with the best mobile application

<p>We discover opportunities and bring digital innovations.<br>It doesn’t matter what stage you are in – we will understand and help.</p>

We build digital

<p>We are the GoodRequest product studio. For 10 years, we have been creating sustainable digital products that are effective, grow gradually and generate added value.</p>

Our projects

We create products from idea to growth.

Testimonials

What we do

Product 

<p>Want to create a beloved product? The best products are created by combining human needs, the right technologies and business. First, we focus on understanding the target audience and your business goals.</p>

Design

<p>Our certified UX/UI designers will help you understand your users' needs. Through user research, UX audits, data analysis, and usability testing, we'll gain insights and optimize the customer experience for each platform.</p>

Development

<p>Our experienced team has developed 200+ successful mobile &amp; web apps. We build apps tailored to the needs of your business and users, delivering the ultimate experience and building on a secure and stable architecture.</p>

Growth

<p><span lang="EN" dir="ltr">The process does not end with implementation. If we want to remain the market leader, we have to be proactive. Together with our customers, we constantly optimise the system and implement improvements.</span></p>

We build digital productsexperiences servicesbusinessessolutions

We create products from idea to growth.

Tatra banka

3

Forbes

-35 %

Fitshaker

Bistro.sk

85%

Kia Slovakia Employees

What we do

Our stories, articles and a look behind the scenes.

Report from Nordic AI Summit: The future of ethics in Artificial intelligence

The 10 most common accessibility problems (Part 2)

Tatra banka defends first place! For the eighth time in a row, it becomes the bank with the best mobile application