Skip to content

SCR34 の翻訳 #2144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
caztcha wants to merge 1 commit into
base: main
Choose a base branch
from
Open

SCR34 の翻訳 #2144

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 54 additions & 58 deletions techniques/client-side-script/SCR34.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<!DOCTYPE html><html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<title>SCR34: Calculating size and position in a way that scales with text size | WAI | W3C</title>
<title>SCR34: テキストサイズに応じて拡大縮小するように、サイズ及びポジションを定める | WAI | W3C</title>



Expand All @@ -11,21 +11,19 @@



<!-- 日本語訳されるまでの一時的なスクリプト -->
<script src="../untranslated-note.js"></script>
</head>
<body dir="ltr">

<a href="#main" class="button button--skip-link">Skip to content</a>
<div class="minimal-header-container default-grid">
<header class="minimal-header" id="site-header">
<div class="minimal-header-name">
<a href="https://w3c.github.io/wcag/techniques/">WCAG 2.2 Techniques</a>
<a href="https://waic.jp/translations/WCAG22/Techniques/">WCAG 2.2 テクニック集</a>
</div>

<div class="minimal-header-subtitle">Examples of ways to meet WCAG; not required</div>

<a class="minimal-header-link" href="https://w3c.github.io/wcag/techniques/about">About WCAG Techniques</a>
<a class="minimal-header-link" href="https://waic.jp/translations/WCAG22/Techniques/about">WCAG テクニック集について</a>
<div class="minimal-header-logo">
<a href="http://w3.org/" aria-label="W3C">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44">
Expand Down Expand Up @@ -54,63 +52,59 @@

<div class="default-grid with-gap leftcol">
<aside class="box nav-hack sidebar standalone-resource__sidebar">
<header class="box-h">Page Contents</header>
<header class="box-h">このページの内容</header>
<div class="box-i">
<nav aria-label="page contents" class="navtoc">
<ul><li><a href="#technique">About this Technique</a></li>
<li><a href="#description">Description</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#related">Related Techniques</a></li>
<li><a href="#tests">Tests</a></li>
<ul><li><a href="#technique">このテクニックについて</a></li>
<li><a href="#description">解説</a></li>
<li><a href="#examples">事例</a></li>
<li><a href="#related">関連テクニック</a></li>
<li><a href="#tests">検証</a></li>
</ul>
</nav>
</div>
</aside>

<main id="main" class="standalone-resource__main">
<!-- 日本語訳されるまでの一時的な注記 -->
<div class="untranslated-note"><p>このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。<br>[ <a href="https://waic.jp/translations/WCAG21/Techniques/">WCAG 2.1 達成方法集</a> ]</p></div>

<h1><span>Technique SCR34:</span>Calculating size and position in a way that scales with text size</h1>
<h1><span>テクニック SCR34:</span>テキストサイズに応じて拡大縮小するように、サイズ及びポジションを定める</h1>




<section id="technique" class="box">
<h2 class="box-h box-h-icon">About this Technique</h2>
<h2 class="box-h box-h-icon">このテクニックについて</h2>
<div class="box-i">



<p>This technique relates to:</p>
<p>このテクニックは、次に関連する:</p>
<ul>

<li>

<a href="https://w3c.github.io/wcag/understanding/resize-text">1.4.4: Resize Text</a>
(<strong>Sufficient</strong>
when used for techniques for text container resizing)
<a href="https://waic.jp/translations/WCAG22/Understanding/resize-text">1.4.4: テキストのサイズ変更</a>
(テキストコンテナのサイズ変更のために用いる場合、<strong>十分なテクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/visual-presentation">1.4.8: Visual Presentation</a>
(<strong>Sufficient</strong>
when used with <a href="../general/G146">G146: Using liquid layout</a>)
<a href="https://waic.jp/translations/WCAG22/Understanding/visual-presentation">1.4.8: 視覚的提示</a>
(<a href="../general/G146">G146: Using liquid layout</a> と一緒に <strong>十分なテクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/reflow">1.4.10: Reflow</a>
(<strong>Sufficient</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/reflow">1.4.10: リフロー</a>
(<strong>十分なテクニック</strong>)
</li>

</ul>




<p>This technique applies to client-side scripting.</p>
<p>このテクニックは、クライアントサイドスクリプティングに適用される。</p>

</div>
</section>
Expand All @@ -120,21 +114,21 @@ <h2 class="box-h box-h-icon">About this Technique</h2>


<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.</p>
<p>There are four properties in JavaScript that help determine the size and position of elements: </p>
<h2>解説</h2>
<p>このテクニックの目的は、文字サイズが拡大縮小されるのに従って、適切に拡大縮小する方法で要素のサイズ及びポジションを計算することである。</p>
<p>ここに要素のサイズとポジションを決める JavaScript の四つのプロパティがある: </p>
<ul>
<li><code class="language-javascript">offsetHeight</code> (the height of the element in pixels)</li>
<li><code class="language-javascript">offsetWidth</code> (the width of the element in pixels)</li>
<li><code class="language-javascript">offsetLeft</code> (the distance of the element from the left of its parent (<code class="language-javascript">offsetParent</code>) in pixels)</li>
<li><code class="language-javascript">offsetTop</code> (the distance of the element from the top of its parent (<code class="language-javascript">offsetParent</code>) in pixels)</li>
<li><code class="language-javascript">offsetHeight</code> (ピクセルでの要素の高さ)</li>
<li><code class="language-javascript">offsetWidth</code> (ピクセルでの要素の幅)</li>
<li><code class="language-javascript">offsetLeft</code> (ピクセルでの親要素 (<code class="language-javascript">offsetParent</code>) の左からの距離)</li>
<li><code class="language-javascript">offsetTop</code> (ピクセルでの親要素 (<code class="language-javascript">offsetParent</code>) の上からの距離)</li>
</ul>
<p>Calculating the height and width using <code class="language-javascript">offsetHeight</code> and <code class="language-javascript">offsetWidth</code> is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The <code class="language-javascript">calculatePosition</code> function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters: <code class="language-javascript">objElement</code> (the name of the element in question), and the offset property (<code class="language-javascript">offsetLeft</code> or <code class="language-javascript">offsetTop</code>):</p>
<p><code class="language-javascript">offsetHeight</code> や <code class="language-javascript">offsetWidth</code> を用いて高さや幅を定めることは簡単である、しかし、オブジェクトの左とトップの位置を絶対配置の値として定める時、親要素を考える必要がある。下記において、<code class="language-javascript">calculatePosition</code> 関数は、要素におけるすべての親ノードの最終的な値が決定するまで繰り返されている。その関数は <code class="language-javascript">objElement</code> (当該の要素の名前) とオフセットプロパティ (<code class="language-javascript">offsetLeft</code> 又は <code class="language-javascript">offsetTop</code>) の二つの引数を取っている。</p>
</section>
<section id="examples">
<h2>Examples</h2>
<h2>事例</h2>
<section class="example" id="example-1-calculating-the-size-and-position-of-elements-in-a-way-that-will-scale-appropriately-as-the-text-size-is-scaled">
<h3>Example 1: Calculating the size and position of elements in a way that will scale appropriately as the text size is scaled</h3>
<h3>事例 1: テキストサイズに応じて適切に拡大縮小されるように、要素のサイズ及び位置を算出する</h3>

<pre xml:space="preserve"><code class="language-javascript">function calculatePosition(objElement, strOffset {
var iOffset = 0;
Expand All @@ -147,7 +141,7 @@ <h3>Example 1: Calculating the size and position of elements in a way that will
return iOffset;
}</code></pre>

<p>The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left: </p>
<p>次の事例は、上の関数がオブジェクトを、参照オブジェクトの下、かつ、左から同じ距離に配置するために用いられていることを示している: </p>

<pre xml:space="preserve"><code class="language-javascript">// Get a reference object
var objReference = document.getElementById('refobject');
Expand All @@ -166,7 +160,7 @@ <h3>Example 1: Calculating the size and position of elements in a way that will


<section id="related">
<h2>Related Techniques</h2>
<h2>関連テクニック</h2>
<ul>
<li><a href="../css/C12">C12: Using percent for font sizes</a></li>
<li><a href="../css/C14">C14: Using em units for font sizes</a></li>
Expand All @@ -177,20 +171,20 @@ <h2>Related Techniques</h2>
</ul>
</section>
<section id="tests">
<h2>Tests</h2>
<h2>検証</h2>
<section class="procedure" id="procedure">
<h3>Procedure</h3>
<h3>手順</h3>
<ol>
<li>Open a page that is designed to adjust container sizes as text size changes. </li>
<li>Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature). </li>
<li>Examine the text to ensure the text container size is adjusted to accommodate the size of the text. </li>
<li>Ensure that no text is "clipped" or has disappeared as a result of the increase in text size. </li>
<li>テキストサイズの変更とともにテキストコンテナのサイズを調整するように設計されているページを開く。</li>
<li>ブラウザのテキストサイズ調節を使って 200% のサイズまで大きくする。(ズーム機能は使用しない)</li>
<li>テキストコンテナのサイズがテキストサイズに合わせて調整されることを確認する。</li>
<li>テキストサイズを大きくした結果、どのテキストも「切り取られ」たり、見えなくなっていたりしないことを確認する。</li>
</ol>
</section>
<section class="results" id="expected-results">
<h3>Expected Results</h3>
<h3>期待される結果</h3>
<ul>
<li>Checks #3 and #4 are true.</li>
<li>チェック 3 及び 4 が真である。</li>
</ul>
</section>
</section>
Expand All @@ -210,15 +204,13 @@ <h3>Expected Results</h3>
<svg focusable="false" aria-hidden="true" class="icon-comments" viewBox="0 0 28 28">
<path d="M22 12c0 4.422-4.922 8-11 8-0.953 0-1.875-0.094-2.75-0.25-1.297 0.922-2.766 1.594-4.344 2-0.422 0.109-0.875 0.187-1.344 0.25h-0.047c-0.234 0-0.453-0.187-0.5-0.453v0c-0.063-0.297 0.141-0.484 0.313-0.688 0.609-0.688 1.297-1.297 1.828-2.594-2.531-1.469-4.156-3.734-4.156-6.266 0-4.422 4.922-8 11-8s11 3.578 11 8zM28 16c0 2.547-1.625 4.797-4.156 6.266 0.531 1.297 1.219 1.906 1.828 2.594 0.172 0.203 0.375 0.391 0.313 0.688v0c-0.063 0.281-0.297 0.484-0.547 0.453-0.469-0.063-0.922-0.141-1.344-0.25-1.578-0.406-3.047-1.078-4.344-2-0.875 0.156-1.797 0.25-2.75 0.25-2.828 0-5.422-0.781-7.375-2.063 0.453 0.031 0.922 0.063 1.375 0.063 3.359 0 6.531-0.969 8.953-2.719 2.609-1.906 4.047-4.484 4.047-7.281 0-0.812-0.125-1.609-0.359-2.375 2.641 1.453 4.359 3.766 4.359 6.375z"></path>
</svg>
<h2>Help improve this page</h2>
<h2>このページを改善する</h2>
</header>
<div class="box-i">
<p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">public-agwg-comments@w3.org</a> or via GitHub</p>
<p>あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。</p>
<div class="button-group">
<a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D" class="button"><span>E-mail</span></a>
<a href="https://github.com/w3c/wcag/issues/" class="button"><span>Fork &amp; Edit on GitHub</span></a>
<a href="https://github.com/w3c/wcag/issues/new" class="button"><span>New GitHub Issue</span></a>
</div>
<a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSdIpvogLx8kGIMewhQ6MzhG2pOCQZ50iIBViGg8pUrRJuslKg/viewform?entry.685195438=https%3A%2F%2Fwaic.jp%2Ftranslations%2FWCAG22%2FUnderstanding%2Ffocus-not-obscured-minimum" id="file-issue">翻訳に関するお問い合わせ (Google フォーム)</a>
<a href="https://github.com/waic/wcag22/" class="button"><span>GitHub</span></a>
</div>
</aside>

Expand All @@ -239,12 +231,15 @@ <h2>Help improve this page</h2>
<a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project,
co-funded by the European Commission.
</p>
<p>この文書は、2025 年 5 月 21 日付けの <a href="https://w3c.github.io/wcag/techniques/">Techniques for WCAG 2.2</a> を、<a href="https://waic.jp/">ウェブアクセシビリティ基盤委員会 (WAIC)</a> の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。
</p>
<p>この翻訳文書の利用条件については、<a href="https://waic.jp/license-for-translated-documents/">WAICが提供する翻訳文書のライセンス</a>をご覧ください。</p>
</div>
</footer>

<footer class="site-footer grid-4q" aria-label="Site">
<div class="q1-start q3-end about">
<div>
<!--div>
<p><a class="largelink" href="https://www.w3.org/WAI/" dir="auto" translate="no" lang="en">W3C Web Accessibility Initiative (WAI)</a></p>
<p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
</div>
Expand All @@ -255,12 +250,12 @@ <h2>Help improve this page</h2>
<li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg focusable="false" aria-hidden="true" class="icon-youtube " viewBox="0 0 32 32"><path d="M31.327 8.273c-0.386-1.353-1.431-2.398-2.756-2.777l-0.028-0.007c-2.493-0.668-12.528-0.668-12.528-0.668s-10.009-0.013-12.528 0.668c-1.353 0.386-2.398 1.431-2.777 2.756l-0.007 0.028c-0.443 2.281-0.696 4.903-0.696 7.585 0 0.054 0 0.109 0 0.163l-0-0.008c-0 0.037-0 0.082-0 0.126 0 2.682 0.253 5.304 0.737 7.845l-0.041-0.26c0.386 1.353 1.431 2.398 2.756 2.777l0.028 0.007c2.491 0.669 12.528 0.669 12.528 0.669s10.008 0 12.528-0.669c1.353-0.386 2.398-1.431 2.777-2.756l0.007-0.028c0.425-2.233 0.668-4.803 0.668-7.429 0-0.099-0-0.198-0.001-0.297l0 0.015c0.001-0.092 0.001-0.201 0.001-0.31 0-2.626-0.243-5.196-0.708-7.687l0.040 0.258zM12.812 20.801v-9.591l8.352 4.803z"></path></svg> YouTube</a></li>
<li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
</ul>
</div>
</div-->
<div dir="auto" translate="no" lang="en">
<p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
</div>
</div>
<div dir="auto" translate="no" class="q4-start q4-end" lang="en">
<!--div dir="auto" translate="no" class="q4-start q4-end" lang="en">
<ul style="margin-bottom:0">
<li><a href="/WAI/about/contacting/">Contact WAI</a></li>
<li><a href="/WAI/sitemap/">Site Map</a></li>
Expand All @@ -269,7 +264,7 @@ <h2>Help improve this page</h2>
<li><a href="/WAI/translations/"> Translations</a></li>
<li><a href="/WAI/roles/">Resources for Roles</a></li>
</ul>
</div>
</div-->
</footer>

<link rel="stylesheet" href="../a11y-light.css">
Expand All @@ -283,7 +278,7 @@ <h2>Help improve this page</h2>
</script>
<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>

<script>
<!--script>
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDoNotTrack", true]);
Expand All @@ -299,7 +294,8 @@ <h2>Help improve this page</h2>
</script>
<noscript>
<p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328&amp;rec=1" style="border:0;" alt="" /></p>
</noscript>
</noscript-->
<script src="https://waic.jp/docs/js/translation-contact.js"></script>


</body></html>